[Resolved] Navigation button hover over to change colour

[Ben]

Hey guys,

I’ve added a button in my main navigation using the code you provided in your documentation;

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

But how do I get the button to change color when it’s hovered over?

Thanks

[Tom]

Hi there,

You would do this:

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

    .main-navigation .main-nav ul li.nav-button:hover a {
        background-color: #000000;
        color: #ffffff;
    }
}

Hope this helps!

[Ben]

Perfect!

Thanks Tom 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts