Different Header on Scroll in Divi 4.0

Last modified Aug 4, 2021

Difficulty Intermediate

Language CSS, JavaScript

Category Header and Navigation, New Functionality

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.

CSS

.header-f-wrapper {
opacity:0;
}

@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-transition: all 0.75s ease-out;
-moz-transition: all 0.75s ease-out;
-ms-transition: all 0.75s ease-out;
-o-transition: all 0.75s ease-out;
transition: all 0.75s ease-out;
}
  
.header-f-wrapper.header-show {
opacity:1;
}}

@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>

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.

Your Comments

54 Comments

Nic Sanford Belgard on January 11, 2023 at 6:33 pm

The code seems to work fine on my site, http://www.ip3action.org, but not on the mobile menu. Is there a way for it to show on newer versions of Divi on mobile? Also, is there a way to add padding between the color CAT and the WooCommerce cart button?
Reply
- Anna Kurowska on February 1, 2023 at 3:26 pm
  
  Please read the section “3. Will this work on mobile devices?”
Chris Pervelis on February 11, 2022 at 8:40 am

Hi. I am having one problem, the initial header/navigation is not clickable. When I scroll, the swapped menu works perfectly, but the initial menu does not work.
Reply
- Anna Kurowska on February 11, 2022 at 9:57 am
  
  Hi, can you share a link?
Steve on January 11, 2022 at 4:32 pm

Hi i would like the menu to change as soon as scroll is activated please can you tell me how to adjust this
Reply
- Anna Kurowska on February 11, 2022 at 10:00 am
  Hi, you can do this by adjusting the height in JavaScript, by changing the 20 px or by assigning a fixed number to the height variable
  
  var height = jQuery(".et-l--header").height()+(20);
  
  var height = jQuery(".et-l--header").height()+(10);
  
  var height = 10;
David on October 27, 2021 at 12:09 pm

After following the steps, I have an issue whereby the fixed header only shows if I scroll down the page and refresh it. It will show, but then it gets replaced by the regular header once I scroll either up or down. If I slowly scroll down from the top of the page, I see the fixed header get revealed, but once I continue past the height it occupies, the other regular header returns. The news site isn’t live yet… Any ideas what I need to do to fix it? Thank you.
Reply
- Anna Kurowska on October 29, 2021 at 11:32 am
  
  Hi, please send a link to your site
Dorota Milewska on January 4, 2021 at 8:09 pm

Hi, thanks for the help with making this menu sticky. Unfortunately it makes my top menu (the one on far left at the top of the website AND social icons on the right) not clickable at all. Cam you help me with that? https://greatdee.pl/
Reply
- Anna Kurowska on March 1, 2021 at 2:30 pm
  
  Hi Dorota, links are clickable for me, have you already figured it out or is it specific browser issue maybe?
Ash on December 7, 2020 at 6:25 am

Hi, Thanks for the tutorial. Im stuck!
Double checked everything, the fixed menu does not show on scroll. Can you let me know where i’ve gone wrong.

https://mercy.brandstimulant.com/

Thanks
Reply
- Anna Kurowska on December 7, 2020 at 4:47 pm
  
  Hi Ash, JavaScript is not loading. Try first to fix other issues on the site: you have mixed SSL content and JavaScript errors, not related to our tutorial. Check the console log for more information.
Cat on October 21, 2020 at 10:43 am

Hi,

Thanks for the tutorial. Could I ask one question? I have a button in the Header with rollover colour change. However the effect does not work in the first header, only the fixed header.

Do you know why that would be?

Thanks.
Reply
- Anna Kurowska on October 21, 2020 at 10:58 am
  
  Hi Cat, I would need to investigate the code on the site, you can send a link to the page.
- Cat on October 22, 2020 at 6:55 am
  
  Hi Anna,
  
  The website is in development. Can I send a DM with a link?
- Anna Kurowska on October 22, 2020 at 6:59 am
  
  Sure 🙂 [email protected]
Jasper Razenberg on September 15, 2020 at 4:53 am

Hi there,
Great tutorial/script!
I am wondering… how can I add:
1 – an additional header slide-in effect on scroll down
2 – an additional ease-out fade effect when scrolling back to top
Reply
- Anna Kurowska on September 21, 2020 at 6:51 am
  
  Hi Jasper, we updated snippet and now it includes transition when scrolling down and to top. You can customize it by changing transition property values in the CSS code.
Tristen Arnold on September 13, 2020 at 1:00 am

This is great thanks! Only question is it’s not working on mobile??
Reply
- Anna Kurowska on September 14, 2020 at 1:21 am
  
  Hi, by default it won’t work on mobile devices, but it can be easily changed.
  You can find instructions in the section “3. Will this work on mobile devices?”
Ty on July 25, 2020 at 1:52 am

You saved my life, this worked perfect. thank you thank you thank you!!!!
Reply
- Joshua on July 27, 2020 at 10:25 am
  
  So glad this little snippet could help. Cheers!
Maarten on July 21, 2020 at 8:04 am

Great. But if I do not want it global I should use ‘conditional logic’ huh?
Should I make a template ‘for a specific page’ and another template for another specific page, at the template builder you mean?
Reply
Rafael on July 15, 2020 at 9:45 pm

That’s a great job! I’ve tried some others solutions, but not so nice like that.

In fact, I faced just one little problem: the “header-fixed” header, works fine. Perfect. But the another one, “fail” sometimes, in the submenu’s clics. (both are identic, except, of course, the logo and colors)

Could you help me, please?
Reply
Alfi Septandhi on July 2, 2020 at 3:10 am

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
Eugen on May 30, 2020 at 6:28 am

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
Joshua Novak on May 18, 2020 at 11:51 am

Hello! Love this tutorial. I am having an issue though on mobile where the dropdown menu is being cut off. Any ide on why this would be?

http://staging.ludeman-productions.mysites.io/home/

Thank you!
Reply
- Anna Kurowska on May 18, 2020 at 2:42 pm
  
  Hi, first of all, your menu is not being displayed, because of the code
  
  .et_pb_menu_0_tb_header { display: none!important; }
Agathe on May 10, 2020 at 6:18 pm

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 on May 11, 2020 at 2:44 pm
  
  Just understood how to make it works ! And it’s pretty cool ! Thank you !
massimiliano sticca on April 24, 2020 at 4:11 pm

you see the page in the first comment! use chrome! I’ll try firefox and safari

https://www.sticca.it/new/workshop/
Reply
- Anna Kurowska on April 24, 2020 at 5:40 pm
  
  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 [email protected] and I will try to have it solved for you.
massimiliano sticca on April 24, 2020 at 3:46 pm

https://imageshack.com/i/poi1HSs8j

sorry i forget the screen!
Reply
- Anna Kurowska on April 24, 2020 at 4:05 pm
  
  Thanks for using our snippet, can I have a link to live example of the issue?
massimiliano sticca on April 24, 2020 at 3:44 pm

hello! I have a problem 🙁 when loading page the logo appears like in the screenshot!
any suggestion?

thanks!
Reply
Anna Kurowska on April 19, 2020 at 4:05 pm

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
Craig on April 19, 2020 at 9:04 am

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
Shiran on March 8, 2020 at 3:18 am

Hi Anna,

This works well with desktop, but doesn’t show on mobile. im using an android phone. Any idea why?
Reply
- Anna Kurowska on March 8, 2020 at 7:03 am
  
  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 🙂
Bas on January 9, 2020 at 9:57 am

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 on January 10, 2020 at 2:51 am
  
  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 on January 10, 2020 at 5:10 am
  
  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://wpzone.co/divi-tutorials/divi-media-queries/
Shelley on January 9, 2020 at 9:03 am

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 on January 9, 2020 at 10:18 am
  
  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 on March 9, 2020 at 7:36 pm
  
  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 on April 21, 2020 at 11:07 am
  
  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!
thomas on January 3, 2020 at 8:54 pm

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
Kim on January 3, 2020 at 2:52 pm

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 on January 9, 2020 at 10:17 am
  
  Thank you! 🙂
Hendrik on December 28, 2019 at 4:30 pm

Dear, Great! I love it.

Is it possible to fix it later in the page? So after longer scrolling?
Reply
- Anna Kurowska on January 9, 2020 at 10:17 am
  
  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;
Steve on December 9, 2019 at 2:25 pm

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 on December 10, 2019 at 6:05 am
  
  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%;
Hannah Callahan on October 31, 2019 at 11:26 am

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