Code by Day | Explore By Weekend

How To Make Any Divi Section Stick To The Top When Scrolling Tutorial by Pee Aye Creative

How To Make Any Divi Section Stick To The Top When Scrolling

Learn how to make any Divi section, row, or module stick to the top of the page when scrolling, which is especially useful for the header menu!

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

create a fixed Divi 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 scolling, 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 code to make this work. Copy the snippet below and paste it in the Divi>Theme Options>Integration tab to the < head > of the blog section. For more information you can check out our full guide on where to add 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 this snippet into your Divi>Theme Options>Custom CSS box.

/*set a specific element as fixed when scrolling*/

.pa-sticky-header {
	position: fixed!important;
	top: 0;
	width: 100%;
}
9

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

OUR ONCE A YEAR SALE IS HERE!

25% OFF all Divi Plugins, Courses, and Child Themes!

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
48 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Leandro
Leandro
6 months ago

the second option doesn’t work, the sticky menu heading

Sarah James
Sarah James
6 months ago

Yeh mine didn’t work either 🙂 I followed the steps and just double checked them.

Sarah
Sarah

All good, I figured it out 🙂 thanks for your solutions, appreciate it

Ramon Buzon
6 months ago

Hi Nelson, Good snippet and well explained! But let me suggest this good observation from @Pierre Sudarovich 1 year ago in case you want to complete your post, since your snippet will not work if the Section contains any element with Animation: “Divi add a inline style “overflow-y: hidden;” to the ID “page-container” as soon as there’s some animated elements on your page. And the CSS attribute “sticky” doesn’t like at all. So you’ll have to add this rule to your CSS stylesheet to avoid the problem: #page-container.et-animated-content { overflow-y:initial !important; } Link to the post: https://wordpress.org/support/topic/problem-with-sticky/ Hope it helps!… Read more »

Jesús
6 months ago

Hi Nelson.
Many thanks for your tutorials.

I followed your before tutorial to make a fixed header with two sections and it worked perfectly.
Now I just read this new tutorial and would like to apply it to my header.
However I have followed all the steps and my whole header is still fixed. What am I doing wrong?
I would appreciate your help.

Cheers!

jesus

Hi Nelson.
Sorry for my English. it’s not very good.
I mean first I put me header with 2 sections fix and now I want to make sticky one of them.
But i followed the steps of this tutorial and it doesn’t work im my website.
Something I’m doing wrong
Could you help me ?
Many thanks
My page is
https://www.fqeuskadi.org/

Jesús

Hi Nelson.

Yes I added the Jquery in the Divi Theme Options Integration tab of the blog.

Sean
5 months ago

Hey. For some reason sticky section of global header isn’t working for me. Anyone able to identify why?

Sean Craig

Sorry, I thought I had included the website in the comment. I got it working. Looks good. Thanks for the tutorial!

Jacob
4 months ago

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: a global header with two sections where I want the second section to stay fixed when scrolling. – Check added CSS class “pa-header” in the CSS Class input for the second section – Check in Theme Options added the JQuery Code to <head> – Check in Theme Options added the Custom CSS for .pa-sticky-header – Check saved, refreshed, cleared cash… everything – check But it is not working (no effect at all) 🙁 I have gone through the steps several… Read more »

Last edited 4 months ago by Jacob Reinholdt
Ken Shoufer
Ken Shoufer
Reply to  Jacob
2 months ago

Could it be that Divi made some changes on an update and caused problems with this method of making a global section sticky?

momodou lamin jammeh
4 months ago

Thank You Man YOU really save life.
100%
sTuDeNt of YOURS!!👍

Ben
Ben
4 months ago

Im also having the same issue as Jacob with the second option not taking any effect. I have a global header within the Theme builder. Its made up of a single section and three rows within that section. • Top row: login menu and social media follow • Middle row: Logo and product search bar • Bottom row: Main menu and cart icon Im trying to make the bottom row with the main menu sticky. I added “pa-header” to the bottom row. Advanced tab > CSS ID & Classes > CSS Class > pa-header I added the jquery code to… Read more »

Ben
Ben

Sorry, my fault for not explaining myself better. I was referring to your tut, the second part about “How To Make A Divi Theme Builder Header Menu Sticky This Is Intended For Headers With Multiple Sections” I also should have mentioned that my header was made up of two sections previously but one was being used for mobile and tablet so didnt think to mention it. I have re-read the tut, along with your suggestion in your comments reply and have added “pa-header” to a section not a row, my bad for not reading properly. It doesnt seem to matter… Read more »

Daniel
4 months ago

Hi there, Thanks so much for the great video, should work great. I tried all the solutions multiple time but still can’t see what is wrong. Not working in a simple custom header with 2 sections.

Daniel

Hello, thanks that does get me closer. I implemented every solution and went through all the settings and still not working. Thanks so much for your help Nelson!!!

Daniel
Reply to  Daniel
4 months ago

I simply need the menu area to be sticky on scroll.

Daniel
Reply to  Daniel
4 months ago

I downloaded the Sticky menu plugin and it now works. Thanks!

Hal
Hal

Hi, great post. I was just wondering if this will work for any theme other than divi theme. I currently have the divi builder plugin on the 2017 theme. Will this work? Thanks

tépè
4 months ago

Bonjour et merci pour vos tutoriels 🙂 Malheureusement celui-ci ne fonctionne pas sur mon site et je n’arrive pas à comprendre pourquoi. J’ai pourtant suivi à la lettre vos recommandations. Sur https://newsite.robedecoeur.fr/ le menu Hamburger (merci pour ça) refuse de s’arrêter en haut ! Auriez-vous une idée d’ou cela peut venir ? et pouvez-vous m’aider ? Désolé pour la Google traduction. ———————- Hello and thank you for your tutorials 🙂 Unfortunately this one doesn’t work on my site and I can’t understand why. I followed your recommendations to the letter. On https://newsite.robedecoeur.fr/ the Hamburger menu (thanks for that) refuses to… Read more »

tépè

Merci, oui j’ai fini par trouver ce qui ne fonctionné pas.
Un mélange avec un autre code JS pour une autre fonction.

Thanks, yeah, I finally figured out what went wrong.
A mix with another JS code for another function.

Pulkit
Pulkit
3 months ago

Hi!

How to make this work for mobile? This code works perfectly in desktop view. Would love to know how to do the same for mobile as well.

Thanks!

Layla
3 months ago

I pasted the first code in the right row of my blog page layout (made a layout using Divi theme builder), but Divi doesn’t recognize the ‘sticky’ value and the code doesn’t work.

Using dev tools, the code is accepted but the right row is still not sticky when I scroll down the page.
I added it to:
.et_pb_gutters3 .et_pb_column_1_4, .et_pb_gutters3.et_pb_row .et_pb_column_1_4{

  1. width: 20.875%;
  2. position: sticky!important;
  3. top: 0px;
  4. z-index: 9999;

}

I also added the #page-container.et-animated-content { overflow-y:initial !important; } rule to my child theme..

Any idea what I am doing wrong?
Thanks!

Schermafbeelding 2020-08-18 om 16.10.11.png
Last edited 3 months ago by Layla
layla

Well, I did paste your code – the exact same – in the second green column that I use to build my blog page layout. But it doesn’t work on the live blog posts. It’s a post layout made with the theme builder (WP Dashboard > Divi > Theme Builder), could that maybe be the problem? (I don’t see why). The longer code, is how I pasted the code in one of the blog posts (which the Theme Builder layout applies to) using dev tools. It’s the exact same code, applied to the column on a specific blog post. It… Read more »

Last edited 3 months ago by layla
Kam
Kam
3 months ago

Hi Nelson.

Many thanks for your tutorials.
I followed your tutorial, but it doesn’t work on my site, Do you mind help me take a look. What’s the issue

http://0hy.303.myftpupload.com/

best regards, with deeply thanks

jen
jen
2 months ago

Thanks for the tutorial. I tested it on a section and it worked fine, but it didn’t work when I tried it on a row or module. I’m trying to emulate the donate widget on the right side of this page https://www.cooleffect.org/content/project/brazilian-amazon-rosewood-conservation-project

Can you advise on whether my Divi page is set up correctly?

Screen Shot 2020-08-31 at 11.28.21 PM.png
Raees
Raees
1 month ago

Hi Nelson. Super useful tutorial and both methods work great. I would like to report though that animations within the row does break the effect. I’d also like to request some assistance in turning off the effect just for tablet/mobile. Is that something that’s possible? Many thanks and best regards.

Birdie
Birdie
1 month ago

Hi! I love your tuts. Do you know if there’s a good way to use Divi’s new Scroll Effects settings to achieve a stick to top on scroll at x position from top?

ONCE A YEAR SALE! 25% OFF

Plugins • Courses • Templates

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Join over 4,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

25% OFF all Divi Plugins, Courses, and Child Themes! (Only Sale Of The Year! ) Shop Now

0

Your Cart