Mobile Menu - Hide Some Items

The InStyle Template has a very long menu. When viewing it on mobile this presents a design problem because the mobile menu has a vertical orientation and scrolls way off the screen.

I've been trying to find a way to hide certain items from just the mobile menu. I've seen two methods suggested her on the forum, neither of which work, by the way. Those were:

CODE: SELECT ALL
@media screen and (max-width: 1024px) {
#menu677 {display:none;}
}

This did not work for me, I think because the mobile menu does not show the menu item numbers (677 in this example)

CODE: SELECT ALL
option[value="URL"] {
display: none;
}

This one did not work either. I'm not sure why.

The generated html from the menu is very simple, and there is no id or class I can use to style items. Here's an example of a mobile menu item:

<option value="/index.php/outdoor-living">OUTDOOR LIVING</option>

I've tried editing the menu to see if any classes get passed into the mobile menu with no luck. The "Link CSS Style" does not get passed on to the mobile menu, nor does "Additional Class" field from the Menu Params(Gavick Pro).

The only other thing I can think of is to remove this mobile menu altogether and replace it with a different vertical menu which I can style. Are there any other suggestions that will be less cumbersome?

Thanks in advance for any suggestions.

Hi,
method #1 works perfect, but you have to manually add all menu ID's
they are in Menu Manager on the right side of table.
Example :

@media screen and (max-width: 768px) {
a#menu102,
a#menu104
{display:none;}
}

That's all I can say. Try again.

Do not use "CODE: SELECT ALL" this is not part of CSS !!

Either I'm not following you, or you misunderstood the problem. The mobile menu items do not have ANY id or style information. See attachment below.

Screen Shot 2015-11-03 at 3.53.51 PM.png

Using the code you suggested to hide menu numbers would work if the menu numbers were rendered into the menu html. They are not. They are present in the full menu. Not in the mobile menu.

Sorry I missed templates.
--
So you have to use :nth-of-type(x) or similar for options with display:none also
and count menu items one by one like in kindergarten.

Read:
https://developer.mozilla.org/pl/docs/W ... Anth-child
https://developer.mozilla.org/en-US/doc ... th-of-type

As you see it's not so simple in this template

Yep, that sux.

I have a feature request. Pass a CSS class specified in the menu manager into the mobile menu. Then I could just set the class to display:none.

I wonder, could I hide these based on the text? For example, all sub menu items in the mobile menu have a single dash in front of them. Can I set a CSS class to hide all entries that start with a dash?

In old templates it would be not possible request.
But in new ones... I guess you should ask for separate mobile menu which would be much better solution.