[Resolved] Width of sticky navigation

Home Forums Support [Resolved] Width of sticky navigation

Home Forums Support Width of sticky navigation

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2337916
    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.

    #2337978
    David
    Staff
    Customer Support

    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.

    #2338021
    Petri

    Hi David,

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

    #2338200
    David
    Staff
    Customer Support

    Try again with this amend

    3. set the Navigation and Inner Navigation Width to Contained

    #2338213
    Petri

    This amend also doesn’t help.

    #2338232
    David
    Staff
    Customer Support

    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 ?

    #2338237
    Petri

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

    #2338256
    David
    Staff
    Customer Support

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

    .sticky-enabled .main-navigation.is_stuck {
        max-width: 1300px;
        margin: auto;
    }
    #2338302
    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?

    #2338308
    David
    Staff
    Customer Support

    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;
        }
    }
    #2338362
    Petri

    Thanks David, that does the trick!

    #2338766
    David
    Staff
    Customer Support

    Awesome – glad to hear that!!

    #2338833
    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!

    #2338884
    David
    Staff
    Customer Support

    Glad to hear you found a better solution 🙂

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.