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

[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.

[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.

[David]

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.

[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?

[David]

What is the Mobile Menu Breakpoint set to ?

[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).

[David]

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

[Christian Zumbrunnen]

Well that now works perfect.

Thanks a lot.

Your support is incredible.

A little CSS can go a long way 😉

[David]

Glad to be of help!

[Author]

Posts