Spacing between navbar items

[Adrian Cojocariu]

I want some space between the navbar items

I know I can put them in spacing, the problem is I want the background of the header instead of the background of the navbar.

Just like they were separate buttons to click them.

I managed to do that by adding a border of the same color as the header background to the li.


.main-navigation {
margin-top:10px;
}
.main-navigation li.menu-item {
border-style: solid;
border-width: 5px;
border-color: #ffffff;
}


Is there any other … better way to do it ?

[Tom]

How about this:

.main-navigation .menu > li {
      margin-right: 5px;
}

.main-navigation .menu > li:last-child {
      margin-right: 0;
}

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

[Adrian Cojocariu]

Nah, it does affect the margins, but the space between them still is the navbar background color. Note that it’s a floating right navmenu, but I changed it to normal and still no effect.

Borders seem to still seem to give that effect.

[Adrian Cojocariu]

This affects the mobile menu too as well , giving some border around it which doesn’t really bother me but I’d like it full width.

[Tom]

Hmm yea, you would have to remove the background color from the main navigation:

@media (min-width:769px) {
      .main-navigation, .main-navigation ul ul {
            background: transparent;
      }
      .main-navigation .menu > li {
            margin-right: 5px;
      }
      .main-navigation .menu > li:last-child {
            margin-right: 0;
      }
}

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

[Adrian Cojocariu]

HuyHay that works !

The other menu items backgrounds were transparent too though, but I fixed that by adding background color:


.main-navigation .menu > li {
margin-right: 5px;
background-color:#blahblah;


One last thing, is there any other way to vertically align the navmenu in the header ? Instead of using :


.main-navigation {
margin-top:10px;
}


It’s not really centered this way 🙂

[Tom]

Vertical alignment of elements like these can really only be achieved using javascript. You’re better off finding the true vertical center using margin.

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

[Adrian Cojocariu]

Ok, so I thought, thanks.

[Tom]

No problem 🙂

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

[Author]

Posts