Menu Arrows not hidden on mobile
-
under visibility menu i set the menu arrows to hide
it works fine on desktop but they are still visible on mobile
the mobile settings show hide as well but it doesnt change anything
how do i fix this ?
the arrows are on the menu title which is very ugly
thanksThe page I need help with: [log in to see the link]
-
You may have hit a bug on the RTL CSS, Weaver will have to confirm ( I will send him a message).
To correct the alignment error you can add the custom CSS Rules below in Main Options > Fonts & Custom > Custom CSS Rule box
IF you just want to avoid the overlap of the menu item with the arrow, use the rule below (you can change the number to what you like)
.menu-arrows .has-submenu > a {padding-right:1.5em;}If you want all the menu Items to be shifted the same way to be aligned, use the rule below instead.
.is-mobile .wvrx-menu > li > a {padding-right:1.5em;}If you need more help with that, please post on the weaver forum, as this one is not really monitored
https://forum.weavertheme.com/The arrow is what allows you to open the sub menu, so if you remove that people wont know there is a sub menu, or be able to open it.
To improve the look, and better position the hole colored arrow area, use the rules below
This will make sure the arrow box does not overlap the text and center the arrow.
You can play with the values individually to see how they style the arrow box
.menu-arrows .toggle-submenu {width:2em;right:-1.5em;}
.menu-arrows .toggle-submenu::after {margin-right:0.7em;}@yaelal99
There is actually a way to make the sub menu open on hover on mobile if hiding the arrow.
If you really want to do that use the two rules below instead of the single one I gave you to hide the arrows
.menu-arrows .toggle-submenu {display:none;}
.is-mobile-menu li.has-submenu:hover .sub-menu {display:block;}
The topic ‘Menu Arrows not hidden on mobile’ is closed to new replies.
