Avatar of Amanda Watson
Amanda Watson
Flag for Australia asked on

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

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
CSSWordPressHTML

Avatar of undefined
Last Comment
Ryan Chong

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Terry Woods

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Amanda Watson

ASKER
Hi,
Thank helped
However, now the whole site is sitting too high?
Amanda Watson

ASKER
I just moved the header up.....is this going to affect the responsiveness at all
Terry Woods

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).
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Terry Woods

Also, part of the logo is out the top of the page too.
Amanda Watson

ASKER
Can anyone help me fix this one up please?
Terry Woods

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.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Amanda Watson

ASKER
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 Woods

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 Watson

ASKER
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
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Terry Woods

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 Watson

ASKER
I am using chrome.........
Amanda Watson

ASKER
I actually think i fixed it using top:0
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Amanda Watson

ASKER
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??
Ryan Chong

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