How to make a Divi transparent header

Having a transparent header in Divi is a popular design trend that allows your hero section to have a greater impact when the user first visits your site.

The navigation menu text is still visible but the menu bar is transparent and sits on top of your page content as in the screenshot below.

If you are building a transparent Divi header in the Divi Theme Builder using the Divi Menu module then you can follow the steps in option one below. If you are using the default Divi header that ships with Divi then you can scroll down to option two.

1. Option 1 – How to make a Divi menu transparent in the Theme Builder
   1. Add a new header in the Theme Builder
   2. Make the section background transparent
   3. Add a menu module and make the background transparent
   4. Set the menu module position to absolute and top
2. Option 2 – How to make the default Divi menu transparent
   1. Use the Theme Customizer and set the Primary Menu Bar Background Color opacity to 0

Option 1: How to make a Divi menu transparent in the Theme Builder

If you are using the Divi Theme Builder to build your own Divi header using Divi modules then it is very easy to make the menu transparent using some built-in options.

If you are using the default Divi menu rather than creating your own in the Divi Theme Builder then skip down to Option 2 below.

Follow the steps below to make your Divi Menu module transparent when using the Theme Builder to create your header.

1. In your WordPress dashboard navigate to  Divi > Theme Builder and in the Default Website Template click on the option to Add Global Heade and then the option to Build Global Header. This will give you a blank template to build your transparent header using the Divi modules.
2. Make the section background transparent by clicking on the blue section settings icon and then in the Background tab click on the circular transparent color option. Set the section padding to 0px for the top and bottom.
   
3. Add a new row inside the section with 1 column and add a Divi Menu module. In the Divi Menu module settings, set the background to transparent. You will also want to add a logo, set margin & padding, and any other options as required in the Menu module. You can also set up a mega-menu using the built-in mega menu option within Divi.
   
4. If you save your Theme Builder header and open a page on your website you will see that your header section appears white, but it is actually now transparent. The white is the page background as your new transparent header sits before your page content rather than on top of it.
   
5. In order for your transparent menu to sit above the page content you can use the built-in section position settings. In your Theme Builder header open the section settings tab using the blue icon and navigate to the Advanced tab. In the advanced tab, you will want to open the Position tab and set the Position to Absolute.
   
6. If you now save the Theme Builder header and open a webpage you will see that the Divi Menu module is transparent and sits above the page content.
   

This will give you a basic transparent header using the Divi Menu module via the Theme Builder.

You can assign this transparent header to your home page only, or any combination of pages and posts using the Theme Builder options. You may want to edit the text color (I changed the header text to white in the example above) if it is not legible against your page content or make the header semi-transparent.

There are endless options but these steps will get you started with your new transparent header.

Option 2: How to make the default Divi menu transparent

Whilst the Divi Theme Builder is great for creating your own custom transparent header menu, many Divi sites still use the default Divi primary and fixed menus that ship with Divi by default. This website uses the default Divi menu as you can see above, as it works well and is clean and simple.

If you are using the default Divi menu then you can follow the steps below to make the primary menu bar transparent, to make the Fixed Navigation semi-transparent, or to change the navigation bar background for a specific page

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

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 to the page options. So for example, 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);;
   }