Do you want to customize your site and make elements fixed? In this guide, we’ll show you how to make any Divi element sticky both with and without coding.

We’ve recently seen how to make your header sticky using Divi to help users navigate through your content. That’s a good first step but there’s much more you can do. Divi is a highly customizable theme that allows you to personalize every inch of your WordPress site. That’s why, in this tutorial, we’ll have a look at different ways to make any Divi element sticky.

Why Make Divi Elements Sticky?

By default, elements on the sites aren’t sticky so when a user scrolls down, those elements disappear from the screen and the user sees new content. However, you may want to make the most important elements on your site always visible to help your customers find what they need. This means that the element will always be fixed to the screen even if the user scrolls down. For example, you can stick your main menu, registration form, or a column with key information that the users need.

The idea is to make those elements more visible to help your visitors. Sticky elements can also be very helpful to increase sales and conversions. For instance, many online stores make their offers and main Call-to-Action (CTA) sticky to boost their sales.

How to Make Any Divi Element Sticky/Fixed?

There are two main methods to make any Divi element sticky:

1. Using the inbuilt Divi builder plugin
2. With a bit of coding

In this guide, we’ll explain how to make elements fixed with both methods. Both options will get the job done so choose the one that best suits your skills.

1) Using the Divi Builder

The Divi Builder comes with Divi so, if you’re already using this theme, you don’t need to install anything. To make any element sticky, first, you need to create a page and use the visual builder to add or remove elements, edit them, and so on. For this demo, we are going to use one of their premade layout packs called Accountant but you can also use a live page or a completely new page.

Create a Page

First, in your WordPress dashboard, go to Pages > Add New and create a new page.

From now on, we’ll use the Divi visual builder, so press the Use the Divi Builder button and you will see a drag and drop visual builder.

Import Preferred Template

Once the builder opens, you will see three options:

• Build from scratch
• Choose a premade layout
• Clone an existing page

If you want to create a custom design, choose the first option. Using the Divi builder, it will be pretty simple to create a unique page design for your site. Alternatively, you can clone existing page designs or choose a premade layout. In our case, we’re going to use the premade layout template (Accountant). So, to import the Accountant template, we select the Choose premade layout option and then select the one you like from the list.

After that, as we’re using the Classic Editor, you will see something like this on your screen:

However, it’s easier to work with the visual builder so we’re going to switch to it.

Switch to the Visual Builder

In the header, you will see an option to use the visual builder called Build On the Front End. Press it and you’ll see how the screen changes and makes it easier to see the results of the modifications from the frontend.

The Accountant template comes with a right sidebar and a newsletter signup form. However, it’s not fixed so as we scroll down, it disappears. So, let’s see how to make the newsletter sign up box sticky.

Install and Activate Sticky Menu WordPress Plugin

To make any Divi element sticky, we’ll use the Sticky Menu plugin. So, open your WordPress dashboard, go to Plugins > Add new, and search for the Sticky Menu, Sticky Header on Scroll. Then, click on Install and activate it.

With this simple plugin, we will be able to make our menus, header, or any element sticky in no time. To set up the plugin, go to Settings > Sticky Menu (or anything!).

Set up Sticky Menu

There are two main customization setting options:

• Basic
• Advanced

First, let’s see how to customize the basic settings. You will need to name a sticky element. In our case, we are going to call it #sticky and we’ll set a space between the top page and the element to 50px. Don’t worry if you’re not sure about the spacing, you can change this later.

Then, save the basic settings and go to the Advanced settings tab. Here we’ll refine the sticky element a bit more. For example, we will set the Z-Index field to 99998 and add #stop in the push-up element field. The push-up element will help you stop the floating sticky widget (more on this later).

There are some other premium customization options there but we won’t touch that for now. So, once you add these values, save the settings and you’re good to go. After that, open the page you’ve created using the Divi visual builder. We’ll make the newsletter sign up widget sticky by adding a CSS class to it. There are two columns. The left column shows the blog posts and the right one displays the newsletter signup bar. So, we need to apply the CSS ID to the right column.

Add Custom CSS ID

To do this, open the Divi settings section and choose column 2. Under the Advanced tab, you will see a section to add CSS ID, CSS class, and CSS custom codes. To make this element sticky, you simply need to add the Sticky Element you set up in the Basic settings. In our case, we’ll add sticky to the CSS ID field and save the settings.

Make sure you save the whole Divi builder settings, otherwise it won’t work. Then, you can preview the page.

As you can see above, the newsletter signup form is fixed now. However, it overlaps with other elements on the site so we’ll make some changes. This is when the push-up element ID from the Advanced settings come into play. In our case, we will make the newsletter widget stop right before the contact form.

Add the Stop CSS

So as we did earlier, we need to mention the push-up CSS ID in the contact form section. To do this, open the Newsletter Section settings in Divi, go to the Advanced tab, add stop to the CSS ID, and save the changes.

Then, refresh the page in the frontend and you’ll see that the newsletter signup box is sticky but stops when it reaches the contact form and it doesn’t overlap with any other widgets on the site.

Similarly, you can follow the same steps to make any Divi element sticky on your site. Let’s see how you can make the social icons fixed using the Sticky Menu and Divi Builder.

Making social media icons sticky

The process to make social media icons sticky is very similar. However, before we start, keep in mind that with the free version of Sticky Menu, you can only make one element sticky at the same time so remember to remove the sticky CSS ID from columns 2.

After that, you’ll need to add the sticky CSS ID to your social media icons element. Just like we did earlier, click on the element, go to the Advanced tab, and add the custom CSS ID in the corresponding field.

Then save the settings and check the results on the frontend.

 

As you can see, we’ve just made social media icons sticky!

If you don’t want to install any plugins, you can make elements fixed programmatically. Let’s see how to do it.

2) Make any Divi element sticky with a bit of coding

In this section, we will show you how you can make any Divi element fixed programmatically. In this case, instead of making the newsletter signup widget fixed, we’ll show you how to make the header sticky with a bit of coding.

Create a Custom Header

From the Divi theme builder, you can create custom website templates.

For this demo, first, let’s create a Global Header.

You’ll have three options:

• Build from scratch
• Choose a premade layout
• Clone an existing page

For this demo, we’ll create a header from scratch.

In the next step, you need to select the number of rows you want on the header.

For the tutorial, we will choose a single row layout. As we’ve previously seen, after you create your header you will be able to edit it and add multiple elements such as menus, images, custom links, and more. With the drag and drop Divi Builder, you can adjust the sizes and padding of your heading in a few clicks.

In our case, we’ll add a menu to our header.

Add a CSS Class

Before moving forward, you need to mention a CSS class for your header. From the header settings, go to the Advanced tab and add a custom CSS class. We’ll add pa-sticky-header as the custom CSS Class.

After that, save the changes and in the Divi theme options, you will see a section to insert the code under the Integration settings.

Add JavaScript Code

Now the fun part starts. Copy the following JavaScript code:

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

Paste it into the editor and save the changes.

Add Additional CSS

After that, we’ll set the element that we want to make sticky on the site. In our case, to make the header fixed on the top, copy the following CSS code and paste it into the CSS editor and save the changes.

/*to make a specific element sticky*/

.pa-sticky-header {
	position: fixed!important;
	top: 0; /*Sets the distance of the header from the top of the page*/
	width: 100%;
}

Now, check your website’s frontend and you’ll see that the header will be fixed.

Additionally, you can customize the header and change its position, size, and so on. Similarly, you can use the code as a base and make any other element sticky in Divi. For example, you can use it to make forms, buttons, or columns fixed.

Recommendations

Now you know how to create sticky elements on your Divi installation but before concluding our guide, let’s have a look at some tips.

No Animations

With the Divi builder plugin, you can add hover effects to elements, sections, and more. However, we don’t recommend using the hover effects on your sticky elements because they might break your site. If you’re experiencing any technical issues on your installation, just deactivate the hover animation effect and everything will go back to normal.

Preview the Changes before Publishing

Divi Builder allows you to see the changes you make on the screen. This is very useful to make sure that the alignment is correct and that the element doesn’t overlap with any other widgets on the site.

Limited Sticky Elements In Free Version

The WP Sticky Menu’s free version only allows you to add one sticky element. So, if you want to add more elements to your website, you might want to consider upgrading to the pro version that starts at 39 USD.

Conclusion

All in all, fixing some elements is a great option when you want to make them more visible for your users. In this tutorial, we have seen two options to make any Divi element sticky:

• Using the Divi Builder plugin
• Programmatically

If you don’t have coding skills, you can use the Divi Builder plugin. It’s the simplest and most beginner-friendly way to do it. With the live preview mode, you can see every change instantly.

On the other hand, if you don’t want to install any plugins or you just like to code, you can make any element fixed programmatically. Just use the JavaScript code as a base and customize it to make any element you want sticky. You can either add the CSS codes to your theme’s style.css or use the additional CSS section in Divi. Before you do that, make sure you mention the CSS class on your element.

Which method did you use to make your elements sticky? Do you know of any other? Let us know in the comments section below.

If this tutorial was useful, please share it with your friends and fellow bloggers on social media. For more tutorials, have a look at our blog.