Changing the mobile menu

Hi,

Unfortunately that would be the beast way, you can’t build a different menu for mobile only.
If you inspect the menu items you will noticed that each has a unique class, like “menu-item-4630” in this case, so you will need to use that class to hide the menu item which you don’t want to show up on desktop/tablets screen, then another css to hide the menu item you show on desktop and tables on mobile, below you have some screenshots which will make you understand this better:

* http://screencast.com/t/giGXF0RF
* http://screencast.com/t/iSEqUzAbFsVc
* http://screencast.com/t/Suboukyr8z
* http://screencast.com/t/vRvCuGd497M

You could also build the top menu as you like, the top menu it’s hidden on mobiles but you could customize it then hide it on desktop and use it on mobile.
Here you have the css I used for the example:

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

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

Thanks

• This reply was modified 11 years by Lucian.