-
Posts
-
Hello,
is it possible to add menu items to the Main Menu (even mega-menu items) and have them show only on mobile devices?
It would be something in the way that noMobile class works for hiding menu items from mobile devices, just the opposite function.
Thanks,
Daniel
Hi,
You can add Media Queries and choose to hide them on desktop screen widths. Inspect the menu that you want to hide look for the unique menu li id. Add this on your custom.css or Quick CSS.
@media only screen and (min-width: 1024px) {
/* Add your Desktop Styles here */
#menu-item-755 {
display: none;
}
}This will hide the menu on screens with minimum of 1024px resolution.
Regards,
Ismael
Thanks Ismael,
It worked for me, I just had to add !important to the styling:
@media only screen and (min-width: 1024px) {
/* Add your Desktop Styles here */
#menu-item-2606 {
display: none !important;
}
}
One more thing: what I’m hiding here is a fourth column in a mega menu. The result is that the other three columns now show up spreaded over the space for four columns. Is there a way to avoid this?
Regards,
Daniel
- The topic ‘Enfold – Show menu items only in mobile devices’ is closed to new replies.