Navigation Menu Items, how to add a small gap/space in between the items?

[bluebit]

I have a menu where when I hover over the menu say Home is selected and has a color of grey, when I select the menu item next to home the background also changes to grey, but since Home is already grey, it looks like bad next to each other. I want to create a small space 1 or 2px in between the menu items that uses the navigation background color, just so its easier to see the separation of the menu items when i hover next to an already selected menu item.

GeneratePress 1.3.48

[Leo]

Hi there,

How about a menu item separator?

Try this CSS:

.main-navigation .main-nav > ul > li:not(:last-child) > a {
    border-right: 1px solid #DDD;
}

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

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

[bluebit]

thanks, i tired it but i guess the original looks better, so i stayed with it. Could you login to my dummy acccount and see how I can fix the account page, its looks bad.

http://wildlatina.co/my-account/

username: laura
password: j8nJ8xzLZ)v&weW3oOTufesB

[Tom]

I couldn’t login with those credentials.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[bluebit]

username: laura
try this password: wMjx8!jZddasfWS4!2T1TPOU

[Tom]

Couple issues.

1. Your content has no padding.
2. Your body line-height is set to 0 in “Customize > Typography > Body”.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[bluebit]

how can I add padding, also i just checked, the line height is set to 1,5

so before you login, the account page padding, and once you log in, the account page padding needs to be fixed

[Tom]

Content padding can be found in Customize > Layout > Container.

Try looking for this CSS in your custom CSS:

.entry-content p {
    line-height: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts