Archived topic
Lining logo up with menu
9 replies · Started by Simon on February 17, 2021
Hey guys, just a quick one.
I'm trying to get my primary menu and logo lined up.
I think the issue is I added a button on a menu item:
#menu-item-16867 a {
background: #da394a;
color: #fff !important;
border-radius: 8px;
}
#menu-item-16867 a:hover {
background: #da394a;
color: #fff !important;
}
li#menu-item-16867 a {
padding-right: 16px;
padding-left: 16px;
}
Been fiddling with it, adjusting logo size, adjusting padding etc but can't seem to figure it out.
Hi there,
Try activating the navigation as a header option:
https://docs.generatepress.com/article/navigation-as-a-header/
I would also recommend using the Flexbox structure of the theme (customizer > General).
And this method for adding buttons:
https://docs.generatepress.com/article/adding-buttons-navigation/
Thanks for the prompt reply as always Leo. I've done that but now the button on the menu item seems to have gone?
Have you done both steps here?
https://docs.generatepress.com/article/adding-buttons-navigation/
I just read your reply properly. Amazing what happens when I do that! 😂
Thanks Leo, you're a genius!
No problem :)
Sorry again, can I keep the same background colour for the button on hover?
Hi there,
You have this CSS on your Appearance > Customize > Additional CSS:
@media (min-width:769px) {
.main-navigation .main-nav ul li.your-custom-class a {
background-color: #da394a;
color: #fff;
border-radius: 6px;
line-height: 35px;
}
}Modify it to this:
@media (min-width:769px) {
.main-navigation .main-nav ul li.your-custom-class a, .main-navigation .main-nav ul li.your-custom-class a:hover {
background-color: #da394a;
color: #fff;
border-radius: 6px;
line-height: 35px;
}
}Thank you so much! You guys are amazing.
Nice one. Glad you got it sorted. No problem. :D
