Can You Still Have A Transparent Header In Divi Over The First Section? Yes!
The new Divi Theme Builder has brought a lot of change and adjustment to those choosing to active the Theme Builder for the header area of their sites. There are lots of new possibilities, but there are also some things that are not impossible now. We’ve been covering a lot of the new hidden features here on the blog and on our YouTube channel, so be sure to subscribe for all the goodies!
I know some of you were hoping to still be able to achieve the transparent header like we could do with the menu prior to Divi 4.0. It was quite easy – just set the header background slider to transparent, and walah! The content in the first section magically moved up behind it. But there’s no Customizer settings anymore once you have the Theme Builder enabled, so how can we do this?
Easy peasy! You can do this directly in the Divi Builder now since the Divi 4.2 version update, and we are proud to once again be the first to offer a solution to a common request in the Divi community.
Here’s an example of one I threw together:
▶️ Please watch the video above to get all the exciting details! 👆
#1. Set Up The Transparent Header
To achieve the transparent header menu, there are a few settings in to adjust in your header section and in the Divi Menu Module.
Make the section background transparent in Theme Builder layout.
First of all, make sure the main background section in your Divi Theme Builder is set to transparent. By default, it may look like it already set to nothing, but this step is crucial for it to work. Divi now has a transparent color in the color picker, so select that for the header section background.
Make the Menu Module background transparent in Theme Builder layout.
By default the new Divi menu module has a white background, so set that to to transparent as well. By default, this is set to a color, so the Menu Module also needs changed to transparent along with the background of the entire section.
But then this happens? Everything is white instead of transparent! 🙁
That’s okay, we just need to go to the next step which is going to be super easy!
#2. Move The Theme Builder Over Top Of the First Section
The Solution You’ve All Been Wanting
Now for the real deal! In Divi 4.2, there is a new option to set the Position of any module, row, or section. There are several new settings, which we could do previously with a simple line of CSS, but now we can set the position right here in the Divi Builder.
Go to the header section settings to the Advanced tab and look for the Position toggle. Inside, change the Position to Absolute.
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.
#3. Assign The Transparent Divi Header In The Theme Builder
Sitewide Transparent Divi Header
The first solution will make your Divi Theme Builder header transparent across your entire website. It will move the first section of the page up behind the header. When using this method, make sure you have adequate padding in the first section of your pages to make room for the menu on top of it.
Homepage Transparent Divi Header
This second solution will only affect the home page (the one you have set as homepage in WordPress settings).
Specific Page Transparent Divi Header
The last option here is if you want a specific page on your website to have a transparent header. Choose the
#4. Improve Readability
Set text to a light color in the Theme Builder layout.
This goes without saying, but it can be a little confusing to do because the background will be white (even though it is set to transparent)
Add A Color Overlay To The Hero Section
Now, to make the white text stand out, let’s add a color overlay to the background image in the first section of the page.
Here’s another look at the final result of our transparent Divi header built in Divi 4.2 and upward.
Make Fixed and Change The Color When Scrolling
You may want to take this a step farther and make the header stay fixed, and then also change the color of the fixed header when scrolling. To do that, check out our related tutorials on those topics.
Hi, this works like a charm.
Only problem is; I’m using this code for creating a full screen mobile menu. And by using an absolute position, it doesn’t work anymore on that page (I only need a transparent menu on the homepage) do you have a solution how I can still use both? Or maybe a better solution for full screen mobile menu? See: https://opuscbd.nl/home
#mobile_menu, .opened #mobile_menu {
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
max-height: 100%;
z-index: 10;
top: 0;
border: none;
overflow-y: auto;
max-width: 100%;
float: left;
transition: all cubic-bezier(0.5, 0, 0, 1) 800ms;
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url( insert your image URL here );
background-size: cover;
background-repeat: no-repeat;
}
.opened #mobile_menu {
transform: none;
}
.opened #mobile_menu a {
transform: none;
opacity: 1;
}
.opened #mobile_menu .menu-item:nth-child(1) a, .closed #mobile_menu .menu-item:nth-last-child(1) a {
transition-delay: 100ms;
}
.opened #mobile_menu .menu-item:nth-child(2) a, .closed #mobile_menu .menu-item:nth-last-child(2) a {
transition-delay: 200ms;
}
.opened #mobile_menu .menu-item:nth-child(3) a, .closed #mobile_menu .menu-item:nth-last-child(3) a {
transition-delay: 300ms;
}
.opened #mobile_menu .menu-item:nth-child(4) a, .closed #mobile_menu .menu-item:nth-last-child(4) a {
transition-delay: 400ms;
}
.opened #mobile_menu .menu-item:nth-child(5) a, .closed #mobile_menu .menu-item:nth-last-child(5) a {
transition-delay: 500ms;
}
.opened #mobile_menu .menu-item:nth-child(6) a, .closed #mobile_menu .menu-item:nth-last-child(6) a {
transition-delay: 600ms;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: ‘\4d’;
color: #fff;
transition: all ease-in-out 300ms;
z-index: 100;
}
.mobile_nav.closed .mobile_menu_bar:before {
transition: all ease-in-out 300ms;
}
If you want to use the CSS Styling only for the homepage then you can add the class home in the start of the selector and it will work on the home page only.
For example if you want to use this code:
.opened #mobile_menu {
transform: none;
}
for the home page only then add the home class like this:
.home .opened #mobile_menu {
transform: none;
}
and this code will work for the homepage only.
Please let us know if this helps. 🙂
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
Hi Tim,
We have several tutorials for fixed headers. Here’s one to get you started: https://www.peeayecreative.com/how-to-make-a-fixed-divi-header-menu-on-desktop-or-mobile/
thank you