[Resolved] How to fix the wrong behavior of sticky navigation?

Home Forums Support [Resolved] How to fix the wrong behavior of sticky navigation?

Home Forums Support How to fix the wrong behavior of sticky navigation?

  • This topic has 8 replies, 2 voices, and was last updated 1 month ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2047282
    Christian Zumbrunnen

    I’m not using a “normal” primary navigation, but only the off canvas panel for all screen sizes.

    With all kinds of customizations, I tried to have the sticky menu the same, but it’s not working.

    While “sticky” the title disappears, and the hamburger menu moves to the left.

    When reaching a certain breakpoint (from Desktop to Tablet) the menu disappears.

    see screen video: https://www.screencast.com/t/Ztmfck4idem

    I’m sure it’s only a small configuration fix, but I’m not figuring it out

    Thanks for help.

    #2047287
    Christian Zumbrunnen

    I figured out how to let the menu not disappear with the breakpoint:

    I added a reasonable height to the “Menu Item Height” in Customizer > Layout > Off Canvas Panel > Menu Item Height

    I didn’t find a solution for keeping the title and not having the sticky menu use full width when not needed.

    #2047405
    David
    Staff
    Customer Support

    Hi there,

    my Approach would be to display the Mobile Header at ALL screen sizes by setting the Customizer > Layout > Primary Navigation –> Mobile Menu Breakpoint to a high value eg. 10000

    Then disable the Sticky Navigation and Enable the Mobile Header Sticky Option.

    This way you have the Branding on static and sticky header, and you can maintain the same contained width for all screen sizes.

    #2047973
    Christian Zumbrunnen

    Hey David, thanks a lot.

    Now, I have title and menu, very cool.

    But although I use “Contained” as width of the header, it’s still taking a wider width.
    I don’t understand why.

    And finally with this setting I don’t see how to change the menu to the left and the title to the right.

    Any hints?

    #2048025
    David
    Staff
    Customer Support

    What is the Mobile Menu Breakpoint set to ?

    #2048294
    Christian Zumbrunnen

    It’s set to 10000px and Navigation Location to float left.

    I tried with “max-width” for #masthead and #mobile-header with no success.

    I don’t understand why the “header” changes width when scrolling starts and would like to see it, but the toggling of the width is less disturbing than the swapping of the order: title, menu instead of menu, title.

    It seems, the classes of changes from

    main-navigation mobile-header-navigation has-branding has-sticky-branding has-menu-bar-items stuckElement

    to

    main-navigation mobile-header-navigation has-branding has-sticky-branding has-menu-bar-items stuckElement is_stuck navigation-stick navigation-clone

    when scrolling.

    The difference is two classes navigation-stick navigation-clone

    I’m sure the correct customizer settings can help here.

    But couldn’t find out yet.

    The swapping of the order happens when changing the Mobile Menu Breakpoint.

    I had no success in reordering this.

    It stays the same independent of the scrolling, obviously because it’s always the Mobile Menu as the “normal Menu” would only be active on @media (max-width: 10000px).

    #2048409
    David
    Staff
    Customer Support

    Ok – so now we just need a little CSS to a) constrain the width of the sticky nav and b) reorder the nav / branding:

    .main-navigation .inside-navigation {
        max-width: 976px;
    }
    
    .navigation-branding {
        order: 10;
        margin-left: auto;
        margin-right: unset;
    }
    #2048504
    Christian Zumbrunnen

    Well that now works perfect.

    Thanks a lot.

    Your support is incredible.

    A little CSS can go a long way 😉

    #2048518
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.