[Support request] Menu under mobile header

[johnzoro]

Can you do q menu that goes left to right under the mobile header

[David]

Hi there,

you can use the Secondary Navigation and disable its Mobile Behaviour – see doc here:

https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

The swipe left/right can do with a little CSS, if thats required, then set up the site with the nav and let me know and i can take a look

[johnzoro]

i don’t want the secondary menu to appear in desktop only mobile?

[Ying]

i don’t want the secondary menu to appear in desktop only mobile?

It can be hidden by CSS. Once the layout is ready, we can have a look at your site and help with CSS.

[johnzoro]

ok how do i hide it via css?

[David]

You can add this to hide on on desktop:

@media(min-width: 769px) {
    #secondary-navigation {
        display: none;
    }
}

[johnzoro]

hmm i added that css but the menu still shows on desktop

[David]

Remove the CSS, and Paste it in at the top of the Customizer > Additional CSS

[johnzoro]

Thanks that worked!

[David]

That means there is an error in your other CSS.
Check to make sure that any other @media queries are closed.

Eg. this is how the CSS should look:

@media(max-width: 768px) {
    .some-css-selctor {
        some CSS going on here
    }
}

Note the second closing bracket – looks like you’re missing one in your other CSS

[johnzoro]

yeah i was missing a }

[johnzoro]

I did the php by adding it to a code snippet and adding the CSS, now the second menu doesn’t show at all on desktop or mobile.

Is that right?

[David]

So for the CSS in this doc:

https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

Remove that – and use this instead:

@media (max-width: 768px) {
    .secondary-navigation {
        text-align: center !important;
        overflow-x: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    .secondary-navigation .main-nav>ul {
        display: flex !important;
        flex-wrap: nowrap;
    }

    .secondary-navigation .sf-menu>li {
        flex: 1 0 120px;
        scroll-snap-align: center;
    }
}

.secondary-navigation .menu-toggle {
    display: none;
}

Note this line:

flex: 1 0 120px;

the 120px sets the width of the scrollable menu items. Adjust this to suit.
Rest of the menu item styling is still controlled by the customizer

[Author]

Posts