How to make a sticky section in Divi
You can see a live demo here.
Step by step tutorial
In the first step I create a section that is going to be sticky. You can create anything youlike in the demo I just made a section with a 3/4 – 1/4 row and placed a text module and a button module. The most important thing is that you need to add a CSS ID in the advanced tab. You can name it anything you like. I named mine stickybar
Go to plugins > add new
Search for Sticky Menu (or Anything!) on Scroll and install/activate the plugin.
Then go to Settings > Sticky Menu (or Anything!) on Scroll
In the Sticky Element field fill in the class name you gave your section. In my case #stickybar
Important: You have to add # in front of your name here
In the Space between top of page and sticky element: (optional) field I fill in 95. I use a fixed navigation and I want the stickybar underneath it. So I have to add the height here of my navigation. In my case this is 95px but if you use different navigation size it can be another number. You can trial and error the size until you are happy or use a tool like Google inspector. In case you navigation is not sticky then you can leave this field blank.
In the Do not stick element when screen smaller than: (optional) field I fill in 981 which means that this section will only stick for desktops.
Click on Save settings
Clear your caches and you are done!
Ps: If you want to stay up to date with my new releases (free layouts, tutorials etc) then sign up for my newsletter and/or follow me on Facebook
Free Membership
14 Comments
Submit a Comment
Join today
Free Membership
Free Divi layout packs
Checklists & Cheat sheets
Exclusive discounts
This is AWESOME, Mark! I can’t wait to try it!
Thanks!!
Dawn
Excellent solution but it just works for ONE element!! 😉
Yes, unfortunately this plugin only works for one element on a page.
You can use an id like this ” #sticky” and use it for multiple elements if that what you want
i hope there is a way to do without a plugin. i dont like to use plugins.
You can do it probably with CSS. Unfortunately, I don’t have a tutorial for that.
Hey Mark,
Great little tutorial, very helpful and easy to follow.
Thanks!
THANK YOU!
This is exactly what I needed and works perfectly.
Live demo no longer works.
TypeError: $(…).stickThis is not a function
Hi,
It is working again, there was a little conflict with one of my other demo tutorials.
Hey, is the live example working propely? 🙂
Great, thanks for fixing it 🙂
Hi, what if you want to float different elements on different pages but they have different top margins?
Hi Eric,
With this plugin you can only make 1 element sticky.