[Resolved] menu item styling to create standalone 'buttons'

[Jasper]

I would like to create a menu in which each item looks like a separate button. So the background color of each menu item does not ‘touch’ each other, there should be space in between. A bit like in this example but here only the active menu item looks like a button. I want them all to look like a button and then i will style the active one with some other color. http://irisfysiotherapie.nl/

Is that possible, everything i tried always styles the whole background of the menu item, so the menu items next to each other are not like separate buttons.

Regards,

[Tom]

Hi there,

First, set it so the menu background is transparent.

Then you can do this:

.main-navigation .main-nav ul li a {
     background-color: #222222;
     margin-right: 10px;
}

Let me know if you need more info 🙂

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

[Jasper]

thanks, and kind regards

[Tom]

You’re welcome 🙂

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

[Author]

Posts