Hide elements in the new Mobile menu Enfold 4.1

Hello,
Thank you, the social button appeared again.

About the menu, before (the update) I had set a main menu and a secondary menu. The secondary menu has too many elements, and in a mobile device does not looks good. So my client wanted to have a different menu for the mobile version, in order to do this I decided to use some CSS, using this code:

@media only screen and (max-width: 767px) {
.hide-on-mobile { display: none !important; }}
@media only screen and (min-width: 768px) {
.hide-on-desktop { display: none !important; }}

In this way I could hide elements in both menus for showing elements only for mobile and others only for desktop, using the CSS Classes field in Menus. http://i.imgur.com/l1fVK0v.png
After the update, this CSS does not work in the mobile main menu, but it still does work in the secondary menu and in all menus in desktop version.

Here I can show you the main and secondary menu in the desktop website http://i.imgur.com/r9L5MvG.jpg
But in the mobile site, all elements are displayed in the main menu. http://i.imgur.com/734Gdjg.jpg

Thank you!

I looked and attaching a class from the menus setting does not apply in the mobile menu. So, is there a way that I could add a css class to the elements in the mobile menu to hide them again?
Thank you.

Hey, the problem is that in the new mobile menu, elements does not have their own classes, even if they have one assigned in the “Appearance > Menus” WordPress settings, before the update they worked perfectly.
So if the elements (pages) are inside of the mobile menu, I can’t do anything from the Advanced layout editor.
I don’t know if I explained it well.
If I’m not able to give each element of the mobile menu a class, how can I give them a class in order to hide the elements?

Or, is there some way that I can have a different menus for mobile and desktop?

Thank you.

EDIT:
It is not necessary to be a class, but how can I give those elements any attribute to identify them and hide the elements I want with css?
I had an idea of using XFN field in menus settings, because when is used, that attribute appears on mobile menu elements. Even if that works, I don’t know if I should do it in that way. I will wait if you have any better ideas.

EDIT 2:
In the case I was not clear in something, I was doing this exact same thing before the update (http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/)
I just found it in your documentation, but after the update, this doesn’t work anymore in the mobile menu, you should consider that…

• This reply was modified 7 years, 4 months ago by geertroggeman.