[Support request] Indent sub-menu items on mobile menu & current menu item indicators

[Chris]

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.

[Tom]

Thanks for the suggestions! Really appreciate it 🙂

[Jacky]

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

[Leo]

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/

[Jacky]

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

[Leo]

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?

[Jacky]

Thank you! That works and I change it to 50px;

[Leo]

Glad I could help 🙂

[Author]

Posts