Reply To: Different Menu for Mobile

Home Forums Support Different Menu for Mobile Reply To: Different Menu for Mobile

Home Forums Support Different Menu for Mobile Reply To: Different Menu for Mobile

#79312
Tom
Lead Developer
Lead Developer

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 🙂