Tutorial! Divi Transparent Header and Change Color on Scroll

What the heck, there is no Divi Transparent header in the new 4.0 update, so how do I do it?

This tutorial goes along with my other two blog posts about customizations of menu and headers. The other two freebies I have had were Divi Fullscreen Header layouts and Divi Slide in Menu Header Layouts.  So check those out if you haven’t seen them yet. In this tutorial we are going to show you how to get a transparent header in the Divi theme now with the new 4.0 version.

You are most likely here because you don’t understand why divi took away some of the header options in the new Divi 4.0 update when they introduced the theme builder.  The first piece of good news is that they have talked about more features in upcoming updates.  Sure I don’t know how long that will be until we see fixed and transparent headers and changes on scroll, but this may be a great stopgap to create a good looking divi header with little work as it has already been done by me.  There are some options that I will discuss and what to change for different effects and looks.  The first thing I would advise is to watch the video in this post.

I also want to thank Nelson from Pee-Aye Creative for the inspiration, he recently posted a great blog post that shows you how to create a transparent header in the theme builder so I essentially have built upon his idea and code to now allow this divi header to be a fixed header and to change from transparent to another color on scroll with some box shadow.  This will get your header closer to the functionality of Divi prior to the new 4.0 update.

If you like other divi tutorials like these make sure to join our Newsletter list below to receive updates, new tutorials and freebies.

1. Go to the Divi Builder and Add a new template for the correct pages, posts, categories, etc. or use the default website template and make it the global header.

2. Click on the edit button to create our new header.

3. Make the look of the new header you want and keep it to one section, use more rows if you need different column layout.

4. Set your section background to transparent.(You may have to set rows and modules to transparent also if they are not cooperating or looking how you would like).

5. Add a new code module.

6. Add the all of the code below to the code module.  Copy and paste everything including <style> and <script> opening and closing tags.

 <style>
.et_pb_section_0_tb_header.et_pb_section {
  top: 0;
  width: 100%;
  position: absolute;
  padding-top:10px;
  z-index:99999;
  transition: background 350ms ease-in-out;
} 
.et_pb_column{
  z-index:1111;
}
.admin-bar .et_pb_section_0_tb_header{
  margin-top:32px !important;    
}
.single-post #et-main-area{
  margin-top:150px;    
}
@media screen and (min-width: 981px) {
.et_pb_section_0_tb_header.et_pb_section {
  position: fixed;
 }  
.et_pb_section_0_tb_header.et_pb_section.whitebg{
  background:white!important;
  z-index:9999;
  -webkit-box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.1);
  box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.1);   
} 
.et_pb_section_0_tb_header.et_pb_section .et-menu a{
  transition: color 350ms ease-in-out;  
}   
.et_pb_section_0_tb_header.et_pb_section.whitebg .et-menu a{
  color:#000000 !important;  
} 
 }
@media screen and (max-width: 980px) {
.et_pb_section_0_tb_header .et_pb_row{
  display:flex;
}
 }
@media screen and (min-width: 981px){  
.et_pb_section_0_tb_header.et_pb_section {
  position: fixed;
}  
.et_pb_section_0_tb_header.et_pb_section.whitebg{
  background:white!important;
  z-index:9999;
} 
 }
  }
</style>
<script>
jQuery(document).ready(function($){
 $(window).scroll(function(){
  var scroll=$(window).scrollTop();
  if(scroll>=100){  $(".et_pb_section_0_tb_header.et_pb_section").addClass("whitebg");
  } 
  else{ 
   $(".et_pb_section_0_tb_header.et_pb_section").removeClass("whitebg");
  }
  });
   $(".et-l--header .et_pb_menu").closest(".et_pb_column").css("z-index", "9999");
  });
</script>

7. Make changes to the pinkish highlighted parts of the code if you would like to change some things on the header.

I will go line by line to tell you what these things do. The other lines of code that are not highlighted I would not advise changing unless you know css and need to add to it or correct something for your use case.

Lines 8 & 31 – These control the transition time from transparent to your new background.  If you would like the color change quicker then lower the number from 350ms if you would like it a slower transition then increase the number from 350ms.

Line 17 – For this one if you are using a very standard Divi blog you may want to keep this piece of code.  This is going to move the blog page down from your header.  There are two things here if it doesn’t look bad with your blog posts then you can delete the code.  Depending on your Header size you may have to increase or decrease the 150px.

Lines 24 & 47 – This is the color you would like your background to change to on scroll.  Right now I have it set to white, but you can change that to a different color or use hex or rgb codes to set colors.

Line 34 – This is the color of the menu font when you scroll down and the header changes colors.  As I have white for the background color if you have white for the font color it will blend in so my example goes from white to black on the transition.  You can use color name, hex or rgb code.

Line 57 – In this jQuery code the number 100 is the amount of pixels scrolled before the color change happens if you set it lower it will change quicker if you set it higher you will have to scroll further down the page for it to change.

That’s It your all done!

Let me know if you have any questions or there are any problems with the code.  Thanks!