[Resolved] Need some help with a little CSS please!

[Henry]

OK, I am trying to implement a little bit of CSS to change the menu navigation button as recommended to do using this snippet > https://docs.generatepress.com/article/adding-buttons-navigation/

My line-height (I think) is completely off and I can’t figure out what it should be – and – I think that it needs some margin or padding?

If you see my URL you’ll see what I mean: (top right button called ‘Premium’) > http://pegasusxxi.wpengine.com/

Thanks for all help!!

Here is my CSS:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.premiumbutton a {
        /* background-color: #ffffff; */
        border: 2px solid #FFFFFF;
        color: #FFFFFF;
        line-height: 40px; /*this number will likely need to be adjusted*/
    }
}

[David]

Hi there,

Add this property to the above CSS Rule:

margin-top: 10px;

To cover, your menu item line-height is 60px. Your button is 40px. The difference of 20px needs to be split – so by adding half of it to the top will push the button down 🙂

[Henry]

Thanks David – worked great.

[David]

You’re welcome

[Author]

Posts