-
Hi,
Could you advise how I change the spacing between the menu items on mobile without also altering the header? When I alter the menu height in the customiser, it also makes the header smaller.
There is also a line below the submenu items when viewing on mobile, is it possible to remove this?
Many thanks
-
Hi Emma,
Try adding this CSS:
@media (max-width: 768px) { .main-navigation #mobile-menu.main-nav ul li a { line-height: 50px; } .main-navigation.toggled .main-nav ul ul { border-bottom: unset; } }That should resolve both the spacing and line issues.
-
Thank you, that has resolved the spacing between the menu items but there is still too much height between the sub menu items. Is there a way to adjust this as well?
-
Hello,
there is still too much height between the sub menu items. Is there a way to adjust this as well?
Customizer -> Layout -> Primary Navigation, click the mobile icon and adjust Sub-Menu Item Height value.
-
When I change this setting, it also changes it on the desktop view as well which I don’t want to do. Is there a way to change the height of the sub menu on mobile without it also changing on desktop view?
-
Hello,
Selecting the mobile view will only change the sub-menu height on mobile. What is that value set on desktop view? If you click the desktop icon next to the icon I highlighted in my previous screenshot, you should be able to modify the desktop value.
-
When I change the setting in mobile view it also changes on desktop. It doesn’t seem to allow me to set a different value for mobile view. It is currently set to 7px which looks fine on desktop.
-
Try this CSS for mobile sub menu line-height:
@media(max-width: 768px) { .main-navigation #mobile-menu.main-nav ul ul li a { line-height: 20px; } } -
That worked great, thank you.
-
You are welcome 🙂
- You must be logged in to reply to this topic.