Archived topic
Mobile menu item space
8 replies · Started by Julien on September 18, 2020
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 ?
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Sure. You can see it now :)
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
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 ?
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/
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
Hello,
I got it by using a css class for the menu item and adding only margin-top: 50px; as CSS.
Thanks again.
No problem :)
