[Support request] Highlight button on menu

[Maria]

Hi,

I’m trying to highlight the “book a teacher” tab on my main menu but without success. Could you help please?

Many thanks,
Maria

[Leo]

Hi there,

Can you try adding a class name highlight to the menu item first?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

And how would you like to highlight it? Change the background color?

Let me know 🙂

[Maria]

Hi Leo,

Yes I’ve done it.

I’d like either to have a background of this colour: 3A858E or the text in this colour / not sure what looks better.

Thanks,
Maria

[David]

Hi there,

try this CSS:

/* Add Background Color for highlight */
.main-navigation .main-nav li.highlight a {
    background-color: #3A858E;
}

/* Add this if you want to change the color on hover */
.main-navigation .main-nav li.highlight:hover a {
    background-color: #3A858E;
}

or for text colors

/* Add label Color for highlight */
.main-navigation .main-nav li.highlight a {
    color: #3A858E;
}

/* Add this if you want to change the color on hover */
.main-navigation .main-nav li.highlight:hover a {
    color: #3A858E;
}

[Maria]

Thanks so much David!

[David]

You’re welcome

[Author]

Posts