- This topic has 8 replies, 2 voices, and was last updated 7 years, 3 months ago by
Tom.
-
AuthorPosts
-
May 9, 2015 at 11:19 am #106815
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 ?
May 9, 2015 at 4:00 pm #106872Tom
Lead DeveloperLead DeveloperHow 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-developmentMay 9, 2015 at 11:21 pm #106905Adrian 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.
May 9, 2015 at 11:23 pm #106906Adrian 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.
May 9, 2015 at 11:41 pm #106911Tom
Lead DeveloperLead DeveloperHmm 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-developmentMay 10, 2015 at 1:00 am #106940Adrian 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 ๐
May 10, 2015 at 8:04 am #106997Tom
Lead DeveloperLead DeveloperVertical 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-developmentMay 10, 2015 at 9:46 am #107019Adrian Cojocariu
Ok, so I thought, thanks.
May 10, 2015 at 3:06 pm #107054Tom
Lead DeveloperLead DeveloperNo problem ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.