Make Divi 4.0 Header Sticky or Fixed on the Scroll

Last modified Nov 7, 2019

Difficulty Beginner

Language CSS, JavaScript

Category Header and Navigation, New Functionality

Normally, website navigation is displayed on top and disappears when users scroll down. Fixed/sticky navigation menu remains visible and in the same position as the users scroll down and move about a site.

If you want the same on your website, just add the following CSS and JavaScript to your Divi Website.

If you want to display fixed header on the specific pages, use Divi 4.0 conditional logic and insert the divi code module below the menu module and paste the JavaScript snippet. You can do that too with CSS by wrapping the code in the <style> </style> tags or simply paste it into the Custom CSS tab.

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.0.1 of the Divi Theme and Divi Friendly Hosting with PHP 7.3.
If you think this code saved you time, we will be happy to receive a comment! 🙂

____

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, modified by Divi Space, October 22, 2019. Licensed under the GNU General Public License, no warranty; click here for details.

CSS

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media only screen and ( min-width: 480px )  { /* fixed only for deviced > 480px, feel free to change the value */ 

.fixed-header{
z-index: 999; /* display at the top */ 
position: fixed;
width: 100%;
top: 0;
-webkit-animation: fadein 1s ease-in; 
-moz-animation: fadein 1s ease-in;
animation: fadein 1s ease-in;	
}	
}

@media only screen and ( min-width: 782px )  {
	.admin-bar .fixed-header {
  top: 32px;
	}}

Java Script

<script type="text/javascript"> 

jQuery( document ).ready(function() {	
  jQuery(".et-l--header div.et_builder_inner_content").attr('id', 'custom-header');
  var header_container = jQuery("div.et-l--header");
  var header = jQuery("#custom-header");
  var height = jQuery("#custom-header").height();
    header_container.css("min-height", height );
    
 
jQuery(window).scroll(function(){ 
if(jQuery(this).scrollTop()>height){
header.addClass("fixed-header");
}
else{
header.removeClass("fixed-header");
}
})
  })
</script>