Archived topic
Navigation and button not centered vertically
5 replies · Started by Mark on December 17, 2022
I added a button to my navigation (my website is http://www.thorsenlegal.com) and am having 2 issues:
1. While the button is centered vertically, it moved the rest of the navigation menu including Site Title up.
2. I can't seem to make the button font color white, even after including !important in the CSS. It defaults to the standard navigation color settings in Customize. Below is the CSS I tried to use unsuccessfully.
Please help, thank you.
.button.menu-item-1157,
.button.menu-item-1157:visited {
color: #fff !important;
background: #344e41;
padding: 16px 20px;
border-radius: 4px;
font-weight: 500;
letter-spacing: 0.02em;
}
.button.menu-item-1157:hover,
.button.menu-item-1157:active {
background: #c0aa81;
color:#FFF !important;
}
Hi Mark,
Can you try using this solution here first?
https://docs.generatepress.com/article/adding-buttons-navigation/
Hi Leo, tried it - I was able to fix the font color issue. But the vertical spacing is still off. See here (https://thorsenlegal.com/)
Remove the line padding: 20px 22px; in your CSS and use the line-height: 25px to control the size of the button as recommended in the note: /*this number will likely need to be adjusted*/
That number should match the menu item height number in the customizer:
https://docs.generatepress.com/article/menu-item-height-width/
When I used Navigation as Header, it worked. Thank you for your help.
No problem :)
