Different Header on Scroll in Divi 4.0

Last modified Jan 9, 2020
Difficulty Intermediate
Language CSS, JavaScript

We have already shown in a previous snippet how to make the Divi header fixed in Divi 4.0. This snippet is a bit different – because you can set a totally new header upon scroll. That means you can change the logo on scroll, set different navigation, and more!

See the demo below:

1. Create two header sections.

Add a custom ID “header-fixed” to the header you want to display on the scroll.

2. Add the CSS and Javascript code to your 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 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.2 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; }
}
.header-f-wrapper {
display:none;
}

@media only screen and ( min-width: 480px )  { /* fixed only for deviced > 480px, feel free to change the value */ 
.header-f-wrapper {
z-index: 999; /* display at the top */ 
position: fixed;
width:100%;	
top: 0;
-webkit-animation: fadein 0.5s ease-in; 
-moz-animation: fadein 0.5s ease-in;
animation: fadein 0.5s ease-in;  
}
  
.header-f-wrapper.header-show {
display:block;
}}

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

 

JavaScript

<script type="text/javascript"> 

jQuery( document ).ready(function() {	
  
  var header_fixed = jQuery("#header-fixed")
  jQuery( header_fixed ).wrap( "<div class='header-f-wrapper'></div>" );
  var header_f_wrapper = jQuery (".header-f-wrapper");
  var height = jQuery(".et-l--header").height()+(20);
  
 
jQuery(window).scroll(function(){ 
if(jQuery(this).scrollTop()>height){
header_f_wrapper.addClass("header-show");
}
else{
header_f_wrapper.removeClass("header-show");
}
})
  })
</script>

 

Your Comments

16 Comments

  1. Hannah Callahan

    Thank you! Super helpful tutorial, I’ve been looking for a solution like this!

    Reply
  2. Steve

    Thank you!!
    This is a wonderful solution.
    I have another problem to throw at you.
    I created a semi-transparent header with a video slider that runs behind it. When the user scrolls down, I wanted the nav bar to become solid. Your CSS and JS did just that. Yeah! The only problem is that it seems that the new code has pushed the video slider down so it no longer appears under the semi-transparent nav bar. I tried to see if there was something in the CSS you prescribed that might be altered to fix it, but I haven’t found it.

    Any help would be appreciated.

    Again, thank you for all your help.

    Reply
    • Anna Kurowska

      Hello Steve, please try adding the following code to the first section (with semi-transparent header). Let me know if that works for you!

      position: absolute;
      top:0px;
      width: 100%;

  3. Hendrik

    Dear, Great! I love it.

    Is it possible to fix it later in the page? So after longer scrolling?

    Reply
    • Anna Kurowska

      Yes, change the height value, for example

      var height = jQuery(“.et-l–header”).height()+(20);
      var height = jQuery(“.et-l–header”).height()+(1000);
      var height = 1000;

  4. Kim

    Worked like a charm thanks so much!
    I just added a code module in the first menu and pasted the code there and that seemed to work.

    Small note: Just wanted to let you know that at step 1, you say add as a custom Class but it should be custom css ID (on the image it is right:) )

    Reply
    • Anna Kurowska

      Thank you! 🙂

  5. thomas

    it is not working for me, could you please give me the template to import in divi theme builder so i can see what i did wrong. thanks! br thomas

    Reply
  6. Shelley

    Hi! THANK YOU for this!!!

    The fade in is so smooth but the fade out is abrupt. Do you have code to make that smooth as well?

    THANKS!!

    Reply
    • Anna Kurowska

      Hi Shelley 🙂 Do you mind sharing a link? I will see what can be done 🙂

      You can always modify animation style and time

      webkit-animation: fadein 0.5s ease-in;
      -moz-animation: fadein 0.5s ease-in;
      animation: fadein 0.5s ease-in;

    • Ryan

      Were you able to find out what code would need to be added to this to enable a smooth fadeout when scrolling back to the top? I’ve tried several combinations and I can’t seem to be able to accomplish it.

  7. Bas

    Hi Anna, I’m using this to display a simplified menu on scroll, with a menu with only logo and hamburger. If I would replace the standard mobile menu with my own menu, would that be possible (in combination with the scroll functionality)? What code would I need to do that?

    Thanks for your help!

    Reply
    • Bas

      Maybe I wasn’t clear enough: I want the second menu to be visible on scroll but also in screensizes below 780px. Is this possible?

      Thanks.

    • Anna Kurowska

      Thanks for the comment! Sure it is possible!

      We are already using media query in the CSS code
      @media only screen and ( min-width: 480px )
      so just make sure you change the value to whatever fits you 🙂

      More about media queries: https://divi.space/divi-tutorials/divi-media-queries/

  8. Shiran

    Hi Anna,

    This works well with desktop, but doesn’t show on mobile. im using an android phone. Any idea why?

    Reply
    • Anna Kurowska

      Hi Shiran, in this snippet we are using media queries, @media only screen and ( min-width: 480px )

      Header will be fixed only for screens above 480px. Just change this value 🙂

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.

Before You Start

Build a Child Theme

Child themes are incredibly important for the overall look, feel, and navigation of your website, so we encourage you to take the time to get to know the content. This will help your web design and development processes tremendously. That’s why we’ve made it super easy to build a child theme for Divi or Extra in seconds!

Generate Child Theme

How to Add Java Script and jQuery to Divi

There are four ways you can add JavaScript or jQuery to a Divi website: use the code module, the Divi Theme Options console, enqueue scripts using the functions.php file, or using a plugin.

Read More

How to Add CSS to Divi

Divi users can choose between five different methods to add custom CSS to their websites. Read more about these various methods you can use to add custom CSS to your Divi theme, as well as better understand the pros and cons of each method.

Read More