[Resolved] Width of sticky navigation

[Petri]

Hi Support,

I’m struggling with the sticky navigation, the width of the header is contained, this works OK, however when I scroll down the sticky navigation becomes full-width and pops out of the container.

Thanks in advance.

[David]

Hi there,

1. go to Customizer > Layout > Primary Navigation
2. temporarily change the Navigation Location to Below Header
3. set the Inner Navigation Width to Contained
4. switch your Navigation Location back to float right.

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

[Petri]

Hi David,

I followed the steps, unfortunately the sticky navigation stays to wide.

[David]

Try again with this amend

3. set the Navigation and Inner Navigation Width to Contained

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

[Petri]

This amend also doesn’t help.

[David]

The inner container seems to be working:

Do you want the areas i marked in red to be removed ?

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

[Petri]

Yes, that’s what I have in mind thanks.

[David]

Hmmm… odd one, that should work, try adding this CSS:

.sticky-enabled .main-navigation.is_stuck {
    max-width: 1300px;
    margin: auto;
}

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

[Petri]

Hi David,

Thanks again for your help, it now works on larger screens, however on smaller screens the sticky-navigation is still wider than de page-hero photo.
I think this is because I have this code for the body for the looks/design:

body {
padding-left: 25px;
padding-right: 25px;
background-color: #f5f5f5;
}

Is there also a way to solve the sticky nav. problem this while keeping this css-code or am I obliged to delete it?

[David]

So keep the CSS i gave you above add this CSS now:

@media(max-width: 1350px) {
    .sticky-enabled .main-navigation.is_stuck {
        max-width: calc(100vw - 50px) !important;
    }
}

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

[Petri]

Thanks David, that does the trick!

[David]

Awesome – glad to hear that!!

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

[Petri]

Hi again David,

One more remark sorry, after all it didn’t work perfectly because the width was different on different browsers/screens.
So I found another solution: I just turned sticky navigation off in the Customizer and made the header sticky directly in Simple CSS by adding:
.site-header {
position: sticky;
top: 0;
}
This works on all browsers/screens and also saves me quite some extra css code 😉
Have a nice weekend!

[David]

Glad to hear you found a better solution 🙂

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

[Author]

Posts