Having a transparent header in Divi is a common design trend which allows your hero section to have a greater impact when the user first visits your site. The Navigation menu is still visible but the menu bar it sits in is transparent as in the screenshot below. Having an opaque menu prior to scrolling the page (the Primary Menu Bar settings) means your main header image can fill the screen without a distracting solid menu bar at the top of the page.

Most sites using a transparent or opaque background for the primary menu will have it set to become solid or semi-transparent once the user scrolls down the page (Fixed Navigation Settings) so that the menu item text links are visible against the content of the page.

Divi settings allow control over the Divi header background color and level transparent.

transparent divi header before scroll

How to make the Primary Menu Bar transparent

To achieve a transparent or semi-transparent primary menu bar in Divi you will need to access your Theme Customizer.

  1. In your WordPress admin area go to Appearance > Customize
  2. In the Theme Customizer go to Header & Navigation
  3. In the Primary Menu Bar, section scroll down to Background Color and use the right-hand opacity slider to reduce the opacity to 0
  4. Click the publish button and your navigation menu bar will be transparent before the user scrolls the page

How to make the Fixed Navigation semi-transparent

To achieve a transparent or semi-transparent fixed navigation in Divi you will need to access your Theme Customizer.

  1. In your WordPress admin area go to Appearance > Customize
  2. In the Theme Customizer go to Header & Navigation
  3. In the Fixed Navigation Settings, section scroll down to Primary Menu Background Color and use the right-hand opacity slider to reduce the opacity to 60, or whatever leaves navigation links visible as you scroll over the age content.
  4. Click the publish button and your navigation menu bar will be transparent before the user scrolls the page

divi navigation customizer

There is a good chance that you will want to have your homepage navigation bar background to be different from the rest of your site as your homepage may have a dark video header or hero image, whilst all your inner pages have white backgrounds. I find it best to set the primary and fixed navigation background to that which I want for every page on my site, except the homepage. I can then use some extra CSS to style the homepage menu separately.

Change the navigation bar background for a specific page

To override the Theme customizer setting to change the menu background just for a specific page you can add a few lines of custom CSS into the pages options. So for examples, to change the primary and fixed navigation bar background for your homepage you will need to;

  1. Under Pages in the WordPress, dashboard click on the page that you want to edit
  2. Make sure the Divi Builder is active
  3. Click on the page settings icon in the builder (the cogwheel)
  4. In-Page Settings pop-up click on the Advanced tab and then the Custom CSS section
  5. Add the following into the custom CSS box and edit the RGBA color & opacity code to your own. The code below will make the menu background white with 50% opacity.
    #main-header {
        background: rgba(255,255,255,0.5);;
    }

change divi menu background on 1 page

 

 

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close