Remove level 2 menus

[DanM]

I have a menu with 5 first-level links, each one of which has a submenu. For smartphone and tablet screen sizes, I want some of the second-level menus removed (based on a special class name). I don’t want the submenu indicator. I just want those first-level items to behave as a menu item without a submenu. But for the desktop screen size I want the second-level menu to be there. I know how to differentiate screen sizes in CSS and JavaScript. I just can’t figure out how to turn the second-level menu off and get rid of its submenu indicator.

[admin]

For example, you could add a class to the parent LI element:

<li class="hidden-sub-mobile">...

and use the following CSS:

@media (max-width: 768px) {
	.hidden-sub-mobile .sub-arrow, .hidden-sub-mobile ul {
		display: none !important;
	}
}

[DanM]

That worked. Thanks very much for the suggestion!

[Author]

Posts