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.

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.

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.

2

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
12 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Leandro
Leandro
7 days ago

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

Sarah James
Sarah James
6 days 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 days 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
4 days 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.

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart