Archived topic
Display Custom Menu for Mobile
3 replies · Started by Prajwal on July 1, 2021
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
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.
Ok you can close this ticket but I have last one question.
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 :)
