[Resolved] Button in Menu – Hover color issue

[Walter]

I am trying to add a ghost-button inside the header navigation for a single navigation item.
Almost everything works fine except the fill of the Hover color.

This Hover color expands beyond the border of the button towards the top and bottom of the navigation header itself.
I probably do something wrong in the additional CSS that is as follows:

(p.s. the site URL is in the private info)

=======================================================
/* login/logout button in menu */

#menu-item-21522 {
border: 2px solid #d3ae48;
border-radius: 5px;
}

#menu-item-21522 a {
padding-left: 50px;
padding-right: 50px;
margin-top: -15px;
margin-bottom: -15px;
}

#menu-item-21522:hover a {
background-color: #d3ae48;
color: #ffffff;
}
=========================================================

Maybe you can help me, it has probably nothing to do with GeneratePress though ?

regards, Walter

[David]

Hi there,

use the method provided here:

https://docs.generatepress.com/article/adding-buttons-navigation/

Then let us know if you need help with the spacing around it.

[Walter]

David, thanks for pointing me to that, it works fine.

regards, Walter

[David]

Glad to hear that

[Author]

Posts