[Resolved] Mobile sticky menu in bottom, hide top mobile menu

[Frank]

Hi,

Happy with GP so far, been working to move a site to it.
One thing I’m currrently fighting with: the mobile menu.

I’ve moved the sticky menu to the bottom (screens are getting larger, thumbs are not).
But I want to hide the initial mobile menu.

On load (mobile), the initial menu loads. When you scroll down that menu disappears from top and the sticky appears on the bottom. You can see what’s happening on this test-site.
Tried hiding the main-navigation, but then both menus are hidden :S

Any suggestions?

[Frank]

Another option is to go for the mobile header (layout->header>enable mobile header) and stick it to bottom, however in that case I lose the site logo on top.

[David]

Hi there,

try this CSS:

.sticky-enabled .main-navigation:not(.is_stuck) {
    visibility: hidden;
}

[Frank]

Perfect:

.sticky-enabled .main-navigation:not(.is_stuck) {
  visibility: hidden;
  height:0;
}

[David]

Glad to be of help.

[Author]

Posts