Archived topic
Indent sub-menu items on mobile menu & current menu item indicators
7 replies · Started by Chris on July 21, 2017
Hi Tom,
A couple of suggestions (for the Menu Plus add-on?) if you'd stuck for ideas- which I'm guessing your not!:
1. How about giving users the option under the customizer to add a variable left indent to all sub-menu items when in mobile menu view to make the sub-menu items more easily distinguishable from the main-menu items, instead of a long vertical list (see image below).
2. You could also give users the option to add a current menu indicator (in addition to the existing colour and background image options), such as an arrow on the left or right of the current menu item.
Thanks for the suggestions! Really appreciate it :)
Hi,
Is this in the few release? The sub-menu items is a bit hard to navigate on mobile devices. An indention would make the sub-items noticeable. Thank you.
Jacky
Hi there,
I don't think this is a for sure thing yet.
You can do it with this CSS though:
@media (max-width: 768px) {
.main-navigation .main-nav ul ul li a {
padding-left: 20px;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Hi,
I have the following to ident sub-menus in mobile mode.
@media (max-width: 768px) {
.main-navigation .main-nav ul ul li a {
padding-left: 20px;
}
}
I also have a third sub-menu under the 2nd sub-menu. I can't seem to find the css selection with inspect on the browser. How do I indent on the 3rd sub-menu items too? Thank you very much.
Jacky
Try:
@media (max-width: 768px) {
.main-navigation .main-nav ul ul ul li a {
padding-left: 20px;
}
}If not can you link me to the page in question?
Thank you! That works and I change it to 50px;
Glad I could help :)
