NH - How to display different menu on tablet & mobile?

Hi Sascha,

Are there repeated menu items in menu1 and menu2?

If so, are you going to reduce or increase menu items on tablet and mobile?

Let me know.

Hi Ying,

thank you for your reply.

"Are there repeated menu items in menu1 and menu2?"

I don't understand what you mean with "repeated menu", never heard about this term. Could you please elaborate?

Thank you in advance and kind regards,
Sascha

Hi there,

what is the difference between Menu1 and Menu2 ?
Do they contain duplicate menu items ?

Yes, the both contain the first 2 items.

MainMenu1 will also contain 3 more items, but MainMenu2 should only contain the 2 plus an anchor-item, which will navigate the visitor to a section which is only visible on tablet and mobile.

The simplest option would be to use a single Menu that contains all your links, and then use CSS to hide the ones you don't require on the different screen sizes.

We can add this to create 2 custom hide-on-* classes:

@media(min-width: 1200px) {
    .hide-on-large {
        display: none !important;
   }
}

@media(max-width: 1199px) {
    .hide-on-small {
        display: none !important;
   } 
}

Now add either hide-on-small or hide-on-large to a Menu items Custom Class field:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes