How to Customize the Menu Color for a Transparent Header in the Avada Theme

Watch this video to learn how to modify your home page’s main menu so you can use the transparent header in the Avada theme.

The Avada theme has a great feature that lets you make the header background transparent, allowing your hero image to scale to the top and giving your home page an infinite feel. It looks especially nice on websites with an arresting hero image, like this one on the Third Partners website:

Implementing this look can be tricky because the font color of the main navigation sometimes needs to be a different color than the menu on the sub-pages of your site. You can see this in action on the Digital Dynamo site:

The gray font of the menu on the sub-pages is too dark when overlaid on the hero image on the home page.

If you modify the menu color from the theme options, it will affect all the pages. Fortunately, you can implement custom CSS on the home page so that the font color for the menu is the color you want, and for the home page only.

But to achieve good UX, we also need to add CSS that ensures the menu’s font color is dark when the menu goes into sticky mode and hamburger mode:

View this video to see how to do it:

Here is the custom CSS I used. You can modify the hex codes to be the colors you prefer, and modify the media query width to correspond with the width your site is set to go into mobile responsive mode:

I hope this helps!

Digital Dynamo specializes in WordPress Services for small businesses. If you need help with your website, please contact us.