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
LVL 11
Amanda WatsonWeb DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Terry WoodsIT GuruCommented:
Try starting with:
#header {
    position: fixed;
    width: 100%;
}

Open in new window


There is a media query for width < 1199px that sets "position: relative;" such that it's no longer sticky below that screen width. You may or may not want to alter that too.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Amanda WatsonWeb DeveloperAuthor Commented:
Hi,
Thank helped
However, now the whole site is sitting too high?
Amanda WatsonWeb DeveloperAuthor Commented:
I just moved the header up.....is this going to affect the responsiveness at all
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

Download eBook
Terry WoodsIT GuruCommented:
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 WoodsIT GuruCommented:
Also, part of the logo is out the top of the page too.
Amanda WatsonWeb DeveloperAuthor Commented:
Can anyone help me fix this one up please?
Terry WoodsIT GuruCommented:
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 DeveloperAuthor 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 WoodsIT GuruCommented:
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 DeveloperAuthor 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 WoodsIT GuruCommented:
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 DeveloperAuthor Commented:
I am using chrome.........
Amanda WatsonWeb DeveloperAuthor Commented:
I actually think i fixed it using top:0
Amanda WatsonWeb DeveloperAuthor 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??
Ryan ChongSoftware Team LeadCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.