Archived topic

Navigation button hover over to change colour

3 replies · Started by Ben on July 15, 2020

Viewing posts 1–4 of 4

July 15, 2020 at 11:18 am #1364728

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

July 15, 2020 at 2:27 pm #1364919

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!

July 15, 2020 at 10:33 pm #1365127

Perfect!

Thanks Tom :)

July 16, 2020 at 9:26 am #1365883

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.