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

2 Likes

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

7 Likes

Thank you, this solve the issue.

Hi,

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

Thanks.

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,
timmse

2 Likes

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?

Any idea how to have the affect stay when the menu is open? I noticed that I can’t get the nav item to react as though it were full height of the header, so you get this odd flash of color change when you mouse over underneath it. How can we make the color stick usign a pseudo class whenever the item / submenu is open?