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

Home Forums Support Indent sub-menu items on mobile menu & current menu item indicators

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #352708
    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.

    Sub-menu indent

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #353091
    Tom
    Lead Developer
    Lead Developer

    Thanks for the suggestions! Really appreciate it 🙂

    #454187
    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

    #454215
    Leo
    Staff
    Customer Support

    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/

    #595471
    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

    #595641
    Leo
    Staff
    Customer Support

    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?

    #595650
    Jacky

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

    #595658
    Leo
    Staff
    Customer Support

    Glad I could help 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.