Nav Menu Hover Color Setting

I am building header template. I want to set particular color for nav menu when hovered. Unfortunately, when the hover psuedo-class is applied, the color changes for the entire nav menu element. I am expecting only the hovered menu that change the color.

I don’t find any option for hover color in typography tab.

I also have tried to set the nav menu color thru theme style>links but does not work.

Need your assitance. Thank you

Set the hover color in the Menu component inspector - tab “Content” → “Top Level Menu” → Typography. Not in the typography options in the “Style” tab.


Thank you, this solve the issue.


I don’t see the setting for hover color, i see only for active, i miss something ?


Hi Laurent,

welcome to the forum! Click on the States Button on the top left, select the :hover pseudo class and change the typography settings. When you’re ready, click the states button again to leave the hover styles.

Check out the academy article & video about pseudo classes as well: Styling Element States & Parts – Bricks Academy

Best regards,

1 Like

Hello I am new to Bricks so I’m probably doing something wrong, but for some reason my :hover pseudo class is not retaining my color selection. When I click out of editing the class, the menu only displays the color choice for hover state. Any idea what I may be doing wrong? Thanks

How about the active page such as home page to let the “home” menu to be colored individually?