[Support request] Display Custom Menu for Mobile

[Prajwal]

I have created a custom menu for mobile using the steps mentioned in the article – https://docs.generatepress.com/article/using-a-different-menu-on-mobile/

Now for mobile, I want to display the menu items on the menu bar instead of hamburger icon and Menu label. I have got only 4 items in menu and I am sure they will fit well in the menu bar. Is that possible. Something like this – https://snipboard.io/Ik7rSG.jpg

[Ying]

Hi there,

In this case, I don’t think there’s a way to show the mobile menu directly without a toggle, since the mobile menu can only been seen in the mobile header.

I would suggest using the same set of the primary menu on mobile, then add CSS to hide some of the menu items.

And go to Customizing > Layout > Primary Navigation, set the Mobile Menu Breakpoint to 0, so the menu won’t become toggle when the screen shrinks.

Hope this is helpful 🙂

Let me know if you need further assistance.

[Prajwal]

Ok you can close this ticket but I have last one question.

[Ying]

You can try this CSS:

@media (max-width: 768px) {
    .separate-containers .site-main {
        margin-top: 0;
    }
}

As you have border-radius applied to the containers, you might want to use a negative value instead of 0 to hide the rounded corner as well 🙂

[Author]

Posts