Archived topic
I'm having an issue with my fixed header. Help anyone?
7 replies · Started by kyle on January 5, 2017
I have just added the code to make my header fixed and here it is:
.site-header {
background-color: #ffffff;
border-bottom: solid 2px #eee;
position: fixed;
width: 100%;
}
It works as it should but now my content is partially covered by the header and I'm not sure how to get around this. Take a look :)
http://swingtradesmart.com/learn-to-trade/what-is-swing-trading/
Any help will be appreciated and I look forward to your replies.
Hi Kyle,
I assume you've considered using sticky navigation instead of fixed header?
This post maybe helpful otherwise: https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579
Let us know.
Hey what is sticky navigation? I tried whats in the post and you can have a look at the result if you want. It's not quite right yet.
This site is currently using sticky navigation - the navigation is always visible at the top when you scroll down the page.
Check out this article on how to use it: https://docs.generatepress.com/article/sticky-navigation/
Let me know.
I have got it working as I like on pages where there is no header img now. But if you look at this page with the header img its not right.
http://swingtradesmart.com/learn-to-trade/what-is-technical-analysis/
How can I get around this?
Thanks
Instead of fixing the entire header like that (which isn't very mobile friendly), I suggest using the built in Sticky Navigation: https://docs.generatepress.com/article/sticky-navigation/
If that's not an option, replace:
.container {
padding-top: 120px;
}
With:
.custom-fixed-header + * {
padding-top: 120px;
}
Okay thanks I'll just get the add on tomorrow :)
Individual add-ons are no longer for sale, but since you've already bought 3 add-ons I can give you a discount for what you already paid so you can get GP Premium if you'd like.
Shoot me an email if you're interested: https://generatepress.com/contact/