Transparent Menu

Hi @jrob81587,

You can certainly do that. It would just take a small bit of CSS to tweak things so they are looking right.

You’ll want to add the following snippet of CSS to your theme in the ‘Additional CSS’ section of the customizer. From the dashboard, if you head into ‘Appearance > Customize’ and then select ‘Additional CSS’ within the customizer, you can add the code there.

.main-navigation .sub-menu {
   background-color: rgba(19, 19, 19, 0.50);
}

Moving forward, you’ll want to keep in mind that the snippet is there, as you may attempt to change the header background color in the customizer and it won’t change. You’ll want to remove this code if that is the case.

To alter the ‘Learn More’ button background color, you can do the same. In the same area of your site, you can add the following just below the one above.

.primer-hero-text-widget a.button {
   background-color: rgba(0, 0, 0, 0.50);
}

The final code snippet inside of ‘Additional CSS’ section of the customizer should look like:

.main-navigation .sub-menu {
   background-color: rgba(19, 19, 19, 0.50);
}

.primer-hero-text-widget a.button {
   background-color: rgba(0, 0, 0, 0.50);
}

Feel free to play around with the background-color attributes.

Let us know if that works for your needs.

Evan

• This reply was modified 7 years, 8 months ago by Evan Herman.