We help IT Professionals succeed at work.

Does anyone know how I can make this header sticky on this theme and keep it responsive

Amanda Watson
on
176 Views
Last Modified: 2017-04-02
Hi,
On this site here http://ballinabyronglass.com.au/newsite/
Id like to make the header sticky but it isn't an option in the bluecollar theme.
Does anyone know how I can make it sticky without ruining the whole theme and making it unresponsive?
Thank you so much
Comment
Watch Question

Web Developer, specialising in WordPress
CERTIFIED EXPERT
Most Valuable Expert 2011
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Amanda WatsonWeb Developer

Author

Commented:
Hi,
Thank helped
However, now the whole site is sitting too high?
Amanda WatsonWeb Developer

Author

Commented:
I just moved the header up.....is this going to affect the responsiveness at all
Terry WoodsWeb Developer, specialising in WordPress
CERTIFIED EXPERT
Most Valuable Expert 2011

Commented:
Yes, it has affected it; the "hamburger" menu (ie the icon that the menu collapses to on narrow screens) is now too high, sitting partly out the top of the page on tablet sized devices, and not visible on smaller devices (at least, that is according to the responsiveness testing tool in Chrome).
Terry WoodsWeb Developer, specialising in WordPress
CERTIFIED EXPERT
Most Valuable Expert 2011

Commented:
Also, part of the logo is out the top of the page too.
Amanda WatsonWeb Developer

Author

Commented:
Can anyone help me fix this one up please?
Terry WoodsWeb Developer, specialising in WordPress
CERTIFIED EXPERT
Most Valuable Expert 2011

Commented:
First remove the "margin-top: -30px; " against #header.

Then try adding:
#core {
  padding-top: 41px;
}

Open in new window


However there is some extra height in the header for screen width less than 768px, being applied by the following style in style.css:
@media (max-width: 767px)
style.css:33
.header-inner {
    padding: 20px 0;
}

Open in new window

Try commenting out the padding, and then it looks good to me at all screen sizes.
Amanda WatsonWeb Developer

Author

Commented:
The only problem though, is you see a big gap from the header strip so I think it should be higher or perhaps wider?
Terry WoodsWeb Developer, specialising in WordPress
CERTIFIED EXPERT
Most Valuable Expert 2011

Commented:
Can you clarify what you mean? What should be higher or wider? The gap is between the header and what else? Do you mean under the slider?
Amanda WatsonWeb Developer

Author

Commented:
The header is sticky, however when you slide down the site, there is a 20px or so high gap that shows the site so the header isn't completely covering the top of the site.  Its sticky but I think the header needs to be a bit taller so there isn't a gap at the top of the header.  Do you know what I mean
top_gap.jpg
Terry WoodsWeb Developer, specialising in WordPress
CERTIFIED EXPERT
Most Valuable Expert 2011

Commented:
I see what you mean in the screenshot, but I don't have the same problem when viewing the site at http://ballinabyronglass.com.au/newsite/.

I can't log in to the dashboard of course, so I don't know if that makes a difference.

I tried viewing the site from Edge, Chrome, Opera, and Firefox on Windows 10. Which browser were you using that has the problem? What screen width were you viewing it at?
Amanda WatsonWeb Developer

Author

Commented:
I am using chrome.........
Amanda WatsonWeb Developer

Author

Commented:
I actually think i fixed it using top:0
Amanda WatsonWeb Developer

Author

Commented:
Um, I think I have it managed, but I am still having trouble, as you can see if you go to
http://ballinabyronglass.com.au/newsite/services/doors-and-windows/
you see a gap between the header name and the slider?  Can anyone help me bring this gap up, or remove it, whatever, and not have it affect the whole header and layout??
CERTIFIED EXPERT

Commented:
for page: http://ballinabyronglass.com.au/newsite/services/doors-and-windows/

similarly, go to line: 22 to 27, replace:

.page-title {
    margin-top: 40px;
}
.vc_column_container {
    margin-top: -200px;
}

Open in new window


with:

.page-title {
    margin-top: 140px;
    padding: 1px 0;
}
.vc_column_container {
    margin-top: -290px;
}

Open in new window


should work and will not affect other pages.

SnapShot.png

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions