How to change the Sticky Menu background and font color

Important: These instructions will only work if you are using the built in “Sticky” option in the Max Mega Menu Settings. If your theme is sticking the header (and menu), scroll down to the next section for details. If your theme is already sticking the header then you should not enable the sticky option in Max Mega Menu as it will create a conflict.

To change the background color of the menu when it is sticky, go to Mega Menu > Menu Themes, scroll down to the Custom Styling area and paste in the following:

You may also want to change the font and hover color of the menu items now that the background color has changed. To do that, use this CSS:

You will need to right click on the page and click ‘Inspect’. This will bring up a view of the page HTML.

As you scroll down the page, and the header becomes stuck, you should find a class that is added to one of the page elements.

This class will be present when the header is stuck, and absent when the header is not stuck.

Once you have found the class (possibly something along the lines of “header-fixed” or “header-is-stuck”), add the following CSS to the Custom Styling area of your menu theme:


Related Articles