Different Header on Scroll in Divi 4.0

Last modified Apr 19, 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.

3. Will this work on mobile devices?

Usually, you don’t want a fixed header on the mobile, as they can take up too much space unnecessarily on already space-challenged mobile screens.
The code below does affect only devices with a minimum of 480px width. That can be easily changed in the CSS code. In the line “@media only screen and ( min-width: 480px )” change the value to anything you want or simply delete the wrapping media query.

 

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

30 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.

    • Marc

      Hi, very nice tutorial and classy effect! The only missing part is the fade out transition, everything else is so refined, that abrupt fade out is killing it :p Is there a way to have the same fadein transition for fade out? Thank you!

  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 πŸ™‚

  9. Craig

    Hi, Great tutorial! We are having issues having this appear on mobile. Is there any way to have this entire module appear on mobile or even just have one of the headers sticky on mobile?

    Reply
  10. Anna Kurowska

    Thank you. This code does affect only devices with a minimum of 480px width. That can be easily changed in the CSS code. In the line β€œ@media only screen and ( min-width: 480px )” change the value to anything you want or simply delete the wrapping media query. I updated the snippet description to help future readers.

    Reply
  11. massimiliano sticca

    hello! I have a problem πŸ™ when loading page the logo appears like in the screenshot!
    any suggestion?

    thanks!

    Reply
    • Anna Kurowska

      Thanks for using our snippet, can I have a link to live example of the issue?

    • Anna Kurowska

      That’s because the image is loading first, after that CSS with the display:none;
      There are many ways to fix it. Please contact me via anna@aspengrovestudios.com and I will try to have it solved for you.

  12. Agathe

    Hi anna ! I have some issues with this tutorial… After creating my fixed header in global header and giving him the right custom ID as you said, I’ve tried to fix it in the top of the screen but it doesn’t work… Both with the Java module below my fixed menu in global header, and with CSS into the Custom CSS tab of my page… Have you any idea to make this work ? Thank you πŸ™‚
    PS: Sorry if I’m not clear, I’m a beginner in WordPress, and I’m using Divi 4.0.2

    Reply
    • Agathe

      Just understood how to make it works ! And it’s pretty cool ! Thank you !

    • Anna Kurowska

      Hi, first of all, your menu is not being displayed, because of the code

      .et_pb_menu_0_tb_header {
      display: none!important;
      }

  13. Eugen

    Good day! It’s really awesome tutorial! Thank you so much!
    One more question, how do I implement fadeOut function?
    Thank you so much!

    Reply
  14. Alfi Septandhi

    Hi Anna!

    Thank you for sharing this tutorial, but I have something to ask. Do you have any code to make the transition when the header back to the first header (on top)?
    I want to make the transition from fixed-header to first header and tried to add fade animation in .header-f-wrapper.header-show CSS but it doesn’t work.

    Thank you!

    Reply

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