[Resolved] Problem with Sticky Header and Nav Bar

[Sean]

Hi, I have GP Pro and I can’t figure out how to make the Header and horizontal navigation bar below it stay “sticky” during scrolling. I was able to find the check box for making the nav bar sticky, but not both. I’ve searched through the forums and on google and it seems like the only option is knowing how to write the proper code in CSS (I think? I don’t know anything about that.) or getting a paid plugin that lets me make both items sticky. Any help is greatly appreciated!

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Sean]

I’m not sure. I’m building the site on a temporary sub domain. I’ll post the link below.

[Leo]

Are you hoping to make this entire part sticky in this layout?
https://www.screencast.com/t/mCtDPyuUT9Cz

Have you considered uploading your icon as the sticky navigation logo?
https://docs.generatepress.com/article/sticky-navigation/#sticky-navigation-logo

I think that would be a good option as well.

Let me know 🙂

[Sean]

Yes, I would like that section to remain as people scroll. I tried putting the logo as the background image for the navigation bar, but it didn’t look good at all. The nav buttons were in the middle of the image and the image didn’t fit right.

[Leo]

Turn off the sticky navigation option in the customizer:
https://docs.generatepress.com/article/sticky-navigation/

And try this CSS:

@media (min-width: 769px) {
    .site-header {
        position: sticky;
        top: 0;
        z-index: 99;
    }
    .main-navigation {
        position: sticky;
        top: 130px; /*ADJUST THIS NUMBER = TOTAL HEADER HEIGHT*/
        z-index: 99;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Sean]

Hi Leo, it looks like the one I tried was different from what you suggested (on the sticky navigation). That way actually works nicely. Not exactly what I was aiming for, but it might be better.

The only problem is that when you start scrolling and the logo appears to the left, with the menu to the right, the logo has a lot of unnecessary padding above and below the logo, making it thinner and harder to read. Is this adjustable?

Thanks for pointing that out!

[Ying]

Hi Sean,

You could give this CSS a try:

.sticky-navigation-logo img {
    padding: 0;
}
#sticky-navigation .navigation-branding {
    margin-left: 0;
}

[Sean]

Hi Ying, I will try that, thank you!

Regarding the earlier idea, is this a good way to do it?
https://generatepress.com/forums/topic/sticky-header-7/

Thanks!

[Sean]

Leo, your suggestion to use a logo on the Nav bar was not what I had in mind, but it turns out to be a better solution because it gives more screen space on a PC and especially on a phone. Also, when using a phone, the menu is already collapsed, so instead of a mostly empty bar, the logo fills in the space nicely.
Thanks!

Ying, your code did the trick perfectly! Now the logo fills the space and is much easier to read. Thank you!

[Leo]

Glad we could help 🙂

[Author]

Posts