[Resolved] Mobile menu item space

Home Forums Support [Resolved] Mobile menu item space

Home Forums Support Mobile menu item space

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1449151
    Julien

    Hello guys,

    I have set up a mobile menu only.

    Each menu item shows on a line (on mobile) : there are as many lines as many items.

    I would like to add a space between the latest item and the previous, so it’s easier to see. Something like an invisible blank menu item. Any clue how to do that ?

    #1449155
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know πŸ™‚

    #1449169
    Julien

    Sure. You can see it now πŸ™‚

    #1449172
    Leo
    Staff
    Customer Support

    Not 100% sure if I understand what you are after.

    Would increase the menu item height with the mobile toggle activated work?
    https://docs.generatepress.com/article/menu-item-height-width/#height

    #1449198
    Julien

    No. I don’t want to make any change to the desktop menu.

    I just want to add a space between two menu item on mobile menu.

    For example, a normal lateral mobile menu looks like this :
    – Item 1
    – Item 2
    – Item 3

    and I would like to do something like :
    – Item 1
    – Item 2

    – Item 3

    Do you see what I mean ?

    #1449228
    Leo
    Staff
    Customer Support

    What about this CSS?

    #generate-slideout-menu.do-overlay .slideout-menu li:last-child {
        margin-top: 50px;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #1449551
    Julien

    Hello Leo,

    Thank you, it’s working !
    The only problem is that it also applies to sub menu. Any idea how to restrict this change to the latest parent menu ?

    With your code it looks like that :
    – Item 1
    * sub-item 1
    * sub-item 2

    * sub-item 3
    – Item 2
    * sub-item 4
    * sub-item 5

    * sub-item 6

    – Item 3

    And I would like this :
    – Item 1
    * sub-item 1
    * sub-item 2
    * sub-item 3
    – Item 2
    * sub-item 4
    * sub-item 5
    * sub-item 6

    – Item 3

    #1449633
    Julien

    Hello,

    I got it by using a css class for the menu item and adding only margin-top: 50px; as CSS.

    Thanks again.

    #1450159
    Leo
    Staff
    Customer Support

    No problem πŸ™‚

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