Forum Replies Created
-
Posts
-
Hello! I came to a solution (and I hope it to be temporary)…
So, because the new mobile menu in the 4.1 Version, any change made in the CSS Classes field in “Appearence > Menus” WordPress Setting is not visible in the new mobile menu, meaning that now it is not possible to identify the elements of the mobile menu using CSS classes. And the problem with that, is that now I can not hide elements from the menu as specified in the documentation (http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/).
This only happens in the new mobile main menu (the secondary and footer menus still shows CSS classes).My solution is:
Instead of identifying menu elements by CSS Classes, is possible to identify them using the “link Relationship (XFN)” field in the WordPress Menus settings (http://i.imgur.com/eUFRNVW.png). This gives a “rel” attribute to the menu element (including in the mobile menu). If I put “hidemb” in that field, I can use the following CSS Code to hide the elements I want in the mobile version:@media only screen and (max-width: 989px) { .hide-on-mobile { display: none !important; } [rel=hidemb] { display: none !important; } }(I still use the .hide-on-mobile because the CSS class still works for the secondary menu)
(When I’m talking about menu elements, I mean about the pages.)I post this in case someone is having the same problem.
This means that the documentation article I mentioned before should be updated, or have a different solution for this. Using the XFN field should not be the final solution for this.
Please, consider to make CSS classes apply again in the mobile menu. And to put back again the option to select when does the mobile menu appears (mobile or mobile & tablet).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…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.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.jpgThank you!
Hello!
I am having issues with the update. In the main (and secondary) menu, before I had some elements hidden on mobile and others hidden in desktop. I was using this quick CSS code and it worked fine until today.@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; }}Now, with the update, those elements appear in the mobile menu (the code works fine for the desktop version of the site).
And the social buttons does not appear on the secondary menu on the mobile site.How can I solve this problem?
Thank you.
