Add a different NAV Menu in Mobile & Tablet screen

I was created a new menu and named it "Mobile Menu"
I want to use it for mobile & tablet NAV Menu
I don’t want to using Desktop Menu in mobile,
So please, How I can to change the NAV Menu in mobile & tablet screen and use the New one?

Ayman
www.ebdee.com

Hi,

That’s not possible I’m afraid. Maybe only if you add all your menu items to a single menu (desktop and mobile) and then hide with CSS what you don’t need when viewing on desktop or mobile.

Good idea,
How can do it?

Do you know how to use the Chrome dev tools?
For example to hide the Home menu item on mobile (https://snag.gy/lAf0is.jpg), you add this:


@media (max-width: 400px) {
      .menu-item-1016 {
          display: none;
      }
}

Or if you want to hide it on larger screens you use this:


@media (min-width: 1024px) {
      .menu-item-1016 {
          display: none;
      }
}

Hello
this one not working!!

@media (min-width: 1024px) {
.menu-item-1016 {
display: none;
}
}

Sorry, add like this, with .main-navigation in front:



@media (min-width: 1024px) {
      .main-navigation .menu-item-1016 {
          display: none;
      }
}

Thanks my dear
it is working well :slight_smile: