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
12
Summary

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
16 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Daniele Brunengo
Daniele Brunengo
4 months 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
4 months ago

I actually did it with z-index.

Theresa
Theresa
3 months 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
1 month ago

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

Keith Agnew
1 month 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
14 days 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
11 days 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
2 days 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…

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart