Code by Day | Explore By Weekend

How To Create a Transparent Header Menu in the Divi Theme Builder Tutorial by Pee-Aye Creative.png

How To Make A Transparent Header In The Divi Theme Builder (Like The Old Header)

This quick tip will show you how to create a transparent background with the Divi Theme Builder so it shows over top the page content (like the old header).
example of a transparent background color in the Divi Theme Builder
Transparent Header in the Divi Theme Builder
How To Create a Transparent Header in the Divi Theme Builder
example of transparent background color in the Divi Theme Builder
make transparent Divi header fixed absolute over top of section

Now your header section will be over top of the first section on your page! Save the Theme Builder layout and go take a look at the page where this layout is assigned. For more on that, go to step #3 below.

Assign the transparent header menu template across entire website the Divi Theme Builder
Assign the transparent header menu template to all pages in the Divi Theme Builder
Assign the transparent header menu template to homepage in the Divi Theme Builder
Assign the transparent header menu template to all pages in the Divi Theme Builder
Assign the transparent header menu template to a specifici page in the Divi Theme Builder
Choose which header you want to be transparent from the Divi Theme Builder
Set Divi section background color overlay for transparent header
set background image blend to overlay for Divi transparent header section

Here’s another look at the final result of our transparent Divi header built in Divi 4.2 and upward.

example of a transparent background color in the Divi Theme Builder
How To Create A Fixed Divi Header Menu On Desktop or Mobile Tutorial by Pee-Aye Creative
How To Change The Color Of A Fixed Divi Header Menu On Scroll Tutorial by Pee-Aye Creative
32
Last updated Jan 3, 2021 @ 1:34 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
42 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Daniele Brunengo
Daniele Brunengo
1 year ago

Hello, great help! This works, but I can’t seem to get the header to have a transparent gradient background.
If I assign a gradient to the .home .et_pb_section_0_tb_header.et_pb_section div, it just doesn’t show.

Daniele Brunengo
Daniele Brunengo
Reply to  Daniele Brunengo
1 year ago

I actually did it with z-index.

Theresa
Theresa
1 year ago

Hi I was trying to do this but at the moment I have on scroll a background header, different colour text and different logo. Is this possible with the new theme builder?

Tim Fleming
10 months ago

Thank you so much! I just spent the last hour trying to figure out why my background was white!

Keith Agnew
9 months ago

Great article – but my header has two sections – I’m trying to make this work with a main menu section (transparent) and a top-bar (with background) – very much like the traditional Divi menu where we have a thin row above the main menu section. If I add absolute positions to these I lose my top-bar section. (thanks)

Jorge Carbwood
9 months ago

I made the header static and transparent, following this great tutorial. Now can I add some color once the page starts scrolling? If not, then the text and the menu are not readable. Any tips will be highly appreciated.

jlcarbwood
jlcarbwood

Awesome! Thank you for the quick follow up. That worked perfectly.

Morris Jamlang
9 months ago

So I was able to replicate what you have over here and it’s awesome. Exactly what I wanted! Kudos. But when I am trying to use the top menu or anything on the header, nothing is clickable. I checked on the inspector but nothing conclusive from what I see. I am still working on the site but I was wondering if it is something like a z-index issue or something overlayed on top of the menu?

David Cuff
8 months ago

Thank you very much for this very helpful post. I have not done this since prior to the Divi Theme Builder and found myself totally stuck again… Until reading your easy to follow article…

Jorge Ad
Jorge Ad
8 months ago

I make the menu transparent, but the problem is that the menu is behind the background full-width image I have in the page (hero section). How could I solve it?

Jorge Ad
Jorge Ad
8 months ago

Thank you! It works perfectly.
 
I was using divi with another theme and the menu was placed behind the content, but I solved changing to divi theme.

Santiago
7 months ago

Doesn’t work for me 🙁
1 Transparent backgrund in Section and menu item
2 Adjuste position to top absolute

Ben Wilson
6 months ago

Nelson:

I love your site and all of the tips, Keep them coming!!!

http://wellvationdesign.flywheelsites.com/

I have a minor issue. I had the transparent header (using Theme builder) working fine, I set off to work on the slider and somewhere along the line, the header is now white. I retraced my steps, but still can’t seem to fix it. Anyway you could take a look and give me some suggestions?
Thanks and stay safe,
Ben

Ben WIlson

Got it. I have 2 different custom headers. Home page uses your transparency trick, but on the inside pages, I tried using the script to prevent Fixed Divi Header From Overlapping The Page. Looks like I caused the conflict.

Can I use script on all, but home page? or do I manually fix it each page?

Thanks for your patience.
Ben

Ben Wilson

Nelson: Thanks for the quick response. I still need a bit of help if possible.
I use the code from https://www.peeayecreative.com/how-to-automatically-stop-your-fixed-divi-header-from-overlapping-the-page-and-push-it-down-instead/ on all pages except the home page )and one other). Is there a way to have a single page ignore this code?

I am able to EITHER have a transparent header OR fix the overlapping issue. I’d love to be able to do both.

Stay safe,
Ben

tim
tim
6 months ago

This was a great article. I’m wondering how you can do at fixed global header and make your logo and menu stay in place. Her is a example
https://www.premierpressureclean.com/

I can get the quote and phone number to work in a global header but when I add the menu and logo it doesn’t work.
Is my approach correct

Thank you

tim
tim

thank you

Ryan
Ryan
5 months ago

Thank you! You saved me a TON of time.

Shane
Shane
5 months ago

Nelson, thanks for all of your tutorials and tips. Seriously, since coming across Pee-Aye, you have saved me so much time and so many headaches. Cannot thank you enough. This is a great tutorial as well, and it’s worked really well. Only one hang-up that I keep running into. With the dropdown menus on mobile and tablet, the dropdown menu items themselves also have a transparent background. When I go to change that in the module settings (I want a white dropdown background), it doesn’t change the transparent background. So then my dropdown menu items blend in with the header.… Read more »

Dan
Dan

Hi Nelson, I have the same issue as Shane. No matter what I do, the mobile hamburger dropdown menu background is transparent. This seems like it may not be connected to this post, but I’m hoping you can help anyway! I can change the dropdown background menu in Divi to white, which works while in the builder, but as soon as I exit the Visual Builder and test out the live site, it’s back to transparent. For some reason, the changes don’t seem to be taking effect. I have tried clearing my cache numerous times and testing out different browsers… Read more »

Jeni
Jeni
4 months ago

Love this! It was exactly what I was looking for with the exception of spacing. Can you add distance between the logo and text so it appears more like the traditional nav bar?

Ryan
3 months ago

Didn’t work for me

Henry Antony
2 months ago

Hi
Great support…
I tried your guidance, but a white background is coming in top header, while scrolling down its shows transparent. but in header its white.
Pls help to remove the white bg, tried some methods using Apperance>customize…
this is my site link “https://navlensstudio.com/”
thank you

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart