Archived topic
Spacing between navbar items
8 replies · Started by Adrian Cojocariu on May 9, 2015
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 ?
How about this:
.main-navigation .menu > li {
margin-right: 5px;
}
.main-navigation .menu > li:last-child {
margin-right: 0;
}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.
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.
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;
}
}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 :)
Vertical alignment of elements like these can really only be achieved using javascript. You're better off finding the true vertical center using margin.
Ok, so I thought, thanks.
No problem :)
