Make Any Divi Section Sticky
Great For Headers With Multiple Sections!
This tutorial works for any section, row, or module, but I want to focus on the header and especially the Theme Builder header. We’ll include this is on our huge collection of Divi header tutorials. This is a great feature that allows you to have multiple sections in a header, but make the section with the main menu stick to the top when scrolling!
How To Make Any Divi Section, Row, Or Module Sticky
The first method here will work for any section, row, or module on the page. All you have to do is copy the code below and put in the elment you want to make sticky. Just go to the settings of the section, row, or module to the Advanced tab, then open the Custom CSS toggle, and paste it in the Main Element.
position: sticky;
top: 0px;
z-index: 9999;Now when you scroll and that element reaches the top, it will stick there. When you scroll back down it will return to it’s oringal placement.
Once again, this is perfect for a header menu. You might want to have a hero section with a big image, then when you scroll the menu scrolls up and becomes sticky. This method is very simple, and should work well in a lot of cases.
How To Make A Divi Theme Builder Header Menu Sticky
This Is Intended for Headers with Multiple Sections
The idea here is to have more than one section in the Divi Theme Builder header. If you want, you can check out our previous tutorial on how to make the entire Divi Theme Builder header fixed, but in this case we only want to make one of the sections fixed to the top when scrolling. In other words, we want to make the menu sticky but the rest of it behave like normal.
From your WordPress Dashboard, go to Divi>Theme Builder. Create a new template, and assign where needed. In our example, we chose to assign the menu to a specific page, but you may want this as your Global Header instead.
Click on “Add Custom Header” and in the popup choose “Build Custom Header.”
Builder The Header
At this point you can buid your header template however you want. The key here is to have more than one section. If you have two sections, the lower one will stay fixed when scrolling.
Add A CSS Class
Choose the section you want to stay fixed when scrolling, and go into the settings to the Advanced tab and open the Custom CSS ID & Classes toggle. Paste the CSS class “pa-header” in the CSS Class input.
Add Some jQuery Code
Next, we need to add some jQuery code to make this work, which you can copy below.
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
<script>
jQuery(function ($) {
var headerHeight = $('header.et-l.et-l--header').outerHeight();
$(window).bind('scroll', function () {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight - headerHeight) {
$('pa-header').removeClass('pa-sticky-header');
}
else {
$('pa-header').addClass('pa-sticky-header');
}
});
});
</script>Add Some CSS Code
The last step is to add a small snippet of CSS to your website. You can copy and paste the snippet below.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*set a specific element as fixed when scrolling*/
.pa-sticky-header {
position: fixed!important;
top: 0;
width: 100%;
}
Hello Nelson,
I have two questions,
First is it not easier to just go to Advanced>Scroll Effects>Sticky Position>Stick to Top ?
Secondly is it possible to stick one section to the top and then make another section stick below the first section?
First of all, I want to thank Nelson for this post.
And many thanks to José, who makes my life a bit more enjoyable with his instruction.
Hi André,
You are welcome! I am glad to hear this great feedback!
Yes, this post is now depreciated. I’m not quite sure how to do what you asked.
I can’t make the second option work on my site https://terapi-og-udvikling.jacobreinholdt.dk/18-2/
I have really been struggling with it.
I have:
But it is not working (no effect at all) 🙁
I have gone through the steps several times.
The only difference from Nelson’s example is that I am doing it on at Global Header instead of a Custom Header… but that shouldn’t be a problem 🤔
Any suggestions?
Could it be that Divi made some changes on an update and caused problems with this method of making a global section sticky?
Hi Jacob,
Not sure! Usually when we do everything right, it is some simple thing. I’d be happy to take a look! Send me an email and maybe I can get access to the site and take a look!
Hey. For some reason sticky section of global header isn’t working for me. Anyone able to identify why?
Hi Sean,
If you give us some more information/context we can help!
Sorry, I thought I had included the website in the comment. I got it working. Looks good. Thanks for the tutorial!
Sounds good!