Width of sticky navigation

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.

Hi David,

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

Try again with this amend

3. set the Navigation and Inner Navigation Width to Contained

This amend also doesn't help.

The inner container seems to be working:

https://www.screencast.com/t/ETvVs0PWiFU2

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

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

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

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

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?

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

Thanks David, that does the trick!

Awesome - glad to hear that!!

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!

Glad to hear you found a better solution :)