[Limited Time Offer] Get 40% off ALL ACCESS MEMBERSHIP before it’s gone!👉
mark Hendriksen logo

How to make a sticky section in Divi

by Mark Hendriksen | Jun 2, 2018 | Divi tutorials | 14 comments

Home › Divi tutorials › How to make a sticky section in Divi

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and popular page builders.

In this tutorial we will be covering how you can create a sticky section. This section will stick at the top when scrolling down. For this we will be using a free plugin called Sticky Menu (or Anything!) on Scroll. You will be learning how to create a section and how to setup the plugin.

You can see a live demo here.

Step by step tutorial

Step 1
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

Sticky section

Step 2
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.

Sticky menu basic settings

Then go to the advanced settings tab and fill in the Z-index: (optional) field 999999

Click on Save settings

Clear your caches and you are done!

Sticky menu advanced settings

I hope that this little tutorial is useful for you and if you have any questions let me know in the comments.

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

14 Comments

  1. Dawn Krueger

    This is AWESOME, Mark! I can’t wait to try it!

    Thanks!!
    Dawn

    Reply
  2. Davide Corizzo

    Excellent solution but it just works for ONE element!! 😉

    Reply
    • Mark

      Yes, unfortunately this plugin only works for one element on a page.

      Reply
    • Papa Amadou Korka Sow

      You can use an id like this ” #sticky” and use it for multiple elements if that what you want

      Reply
  3. Karen

    i hope there is a way to do without a plugin. i dont like to use plugins.

    Reply
    • Mark

      You can do it probably with CSS. Unfortunately, I don’t have a tutorial for that.

      Reply
  4. Joe

    Hey Mark,

    Great little tutorial, very helpful and easy to follow.

    Thanks!

    Reply
  5. Jo Geek Fairy

    THANK YOU!

    This is exactly what I needed and works perfectly.

    Reply
  6. Evan

    Live demo no longer works.

    TypeError: $(…).stickThis is not a function

    Reply
    • Mark

      Hi,

      It is working again, there was a little conflict with one of my other demo tutorials.

      Reply
  7. Ireneusz Pawlik

    Hey, is the live example working propely? 🙂

    Reply
  8. Eric Khangati

    Hi, what if you want to float different elements on different pages but they have different top margins?

    Reply
    • Mark

      Hi Eric,

      With this plugin you can only make 1 element sticky.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *