[Resolved] Different Menu for Mobile

[Tiffany]

How would I make an entirely different menu for mobile (in that it will have different url links for a menu item depending on the screen size)?

[Tom]

Hmm, good question..

Here’s one way off the top of my head..

First, add this CSS:

.desktop-menu-item {
      display: block;
}

.mobile-menu-item {
      display: none;
}

@media screen and (max-width: 768px) {
      .desktop-menu-item {
            display: none;
      }

      .mobile-menu-item {
            display: block;
      }
}

Then add all of your menu items to the menu.

Click on “Screen Options” at the top right of the menu page, and check the “CSS Classes” checkbox.

Now open each menu item, and add “desktop-menu-item” to the class of each item you want to show on large screens, and “mobile-menu-item” on the items you want to show on mobile screens.

That should do it 🙂

[GUILLARD]

Hi,
I have the same request than Tiffany.
The additionnal CSS doesn’t work, seems to be “display: block!important;” in the theme CSS.
Do you have an alternative?

[Leo]

Hi there,

There is a better way now. First make a new menu:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#create-a new-menu

Then set it to slideout navigation:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location

Let me know if this helps.

[GUILLARD]

Hi Leo,
Thanks, it works great!
Regards.

[Leo]

No problem!

[Author]

Posts