Archived topic
How to move the menu down without adding additional padding?
8 replies · Started by Scott on June 28, 2020
Layout > Primary Navigation > Menu Item Height moves the menu down but also adds extra padding.
I'm trying to line up the menu with the bottom of the logo. Menu is float right.
CSS can do it with:
.primary-menu{
margin-top: 55px;
}
But that also starts to introduce some additional padding.
Any help appreciated !
I've found a way to implement this but was wondering if there was a better way.
Which I accomplished by selecting "Use Navigation as Header" and the the following CSS:
#menu-main-menu-1 {
margin-top: 60px;
}
.navigation-branding img{
height:95px;
}Is there a better way to accomplish this ?
Thanks!
Hi there,
Instead of that, try this:
.main-navigation.has-branding .inside-navigation {
align-items: flex-end;
}Tom:
That didn't move anything, both with Use Navigation as Header selected and deselected.
Hi there,
that Code Tom provided should work fine - i edited the CSS using the browser dev tools, removed the top margin CSS and removed the comments from Tom's CSS and it aligned the element to the bottom of the site header.
Can you make those changes, clear any caches and check the front end... let us know.
David:
I still have to specify
.navigation-branding img{
height:95px;}But it does indeed work that way.
Should I not need to specify .navigation-branding img height ?
You guys have the most incredible support :)
aah yes, you do need to specify the height in CSS or otherwise the logo will take on the height of the navigation.
You're welcome
GeneratePress is 10 out of 10 as usual :)
Thanks so much Tom and David!
Glad we could be of help
