Make your Divi header sticky or fixed

The release of Divi version 4.0 allows you to create your own custom header using the Divi Theme Builder and Divi modules without the need for editing theme files or using a 3rd party header plugin.

There are no built-in options to make your custom header template sticky or fixed like you were able to do in the Theme Customizer with the default Divi header.

To make your Divi Theme Builder header sticky or fixed will require you to add a little custom code that can be added via the section options for a fixed header or via a code module in your template for a sticky header.

*Download the Theme Builder template files at the bottom of the page*

What are sticky and fixed menus?

A fixed header will be fixed to the top of the screen at all times, including when the user scrolls down the page.

A sticky header will start with content above it and will stick to the top of the screen as the user scrolls down the page, while the content that was above it will disappear off the page with the rest of the content.

How to make your Theme Builder header fixed

If you want to make your custom header in the Theme Builder fixed you will need to add the following CSS code into the section that contains your header.

position:fixed;
width:100%;
top:0;
z-index:999;

How to make your Theme Builder header sticky

If you want to make your custom header in the Theme Builder stick you will need to;

1. Add a CSS ID myheader into the advanced settings tab > CSS ID & Classes > CSS ID for the section you want to be sticky.
   
2. Add a code module below the header elements and add the following code into the module.

     <script>
   // Adjust the number to be the same as the height of your content above
   window.onscroll = function() {scrollFunction()};
    
   function scrollFunction() {
     if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
       document.getElementById("divi-sticky-header").style.position = "fixed";
     } else {
       document.getElementById("divi-sticky-header").style.position = "";
     }
   }
   </script>

    

   

3. adjust the 150px height value to match the height of the non-sticky part of your header (in this case the 4 blurbs)

Watch the video to see how the fixed and sticky headers work with the Theme Builder

Download the Sticky & fixed Theme Builder templates

Please use the social share options below to access the download link for the sticky and fixed Theme Builder templates.

You will need to unzip the file and import it via the Theme Builder dashboard.
[sociallocker id=”227287″]
download files here
[/sociallocker]