[Resolved] I'm having an issue with my fixed header. Help anyone?

[kyle]

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.

[Leo]

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.

[kyle]

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.

[Leo]

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.

[kyle]

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

[Tom]

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;
}

[kyle]

Okay thanks I’ll just get the add on tomorrow 🙂

[Tom]

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/

[Author]

Posts