[Resolved] Mobile menu item space

[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 ?

[Leo]

Hi there,

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

You can use the private information field.

Let me know 🙂

[Julien]

Sure. You can see it now 🙂

[Leo]

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

[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 ?

[Leo]

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/

[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

[Julien]

Hello,

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

Thanks again.

[Leo]

No problem 🙂

[Author]

Posts