Beaver Builder: Make A Row Sticky On Scroll (CSS Method)

The fastest and easiest way to stick a row in Beaver Builder to the top of your page as you scroll is to add a couple of lines of CSS (and I’ll give you this CSS to copy and paste).

The final result of this tutorial

By the end of this tutorial today, you will be able to do what I show in the image below:

See how the Black Row STICKS to the top of the page?

That’s what I’ll show you how to do and (spoiler) – it’s VERY EASY!

It’s just a bit of CSS.

I’ll give you that CSS and then you’re good to go…

Example: How I sticky a row on my blog to enhance my user-experience

I recently did the sticky menu and scroll to feature on this website, WagePirate.com.

See this row below with the pink background that sticks to the top of my Product page as my users scroll?

When you click these menu items, it scrolls you to that section on that page.

You can click here to see this sticky row in action live right now on this website.

So yeah, I’ll show you how to stick that menu like I’ve done in the next tutorial, but for this one we’re going to start with the basics and keep it nice and simple.

For this tutorial, we’ll be working on this design below.

Let’s start!

Add this CSS to sticky a row on scroll

Here is how to sticky a row to the top of the page when scrolling with Beaver Builder.

Go to the row you wish to sticky to the top of the page and go to it’s Row Settings.

Then in the Advanced tab, add the CSS class sticky-row (1) like the below and then Save (2).

That’s all we need to do in Beaver Builder for this page.

Just save the page like normal so that you’re out of the Beaver Builder editor.

Next, edit your Child Theme’s style.css file in /wp-content/themes/yourchildtheme/style.css and add the below code to the bottom of the css file.

@media ( min-width: 769px ){
	.sticky-row{position:sticky;top:0;z-index:99;}
}

And…. that’s it!

Save your .CSS file and refresh your page to see the effect in action, as shown below.

How this CSS works to sticky a row

Let’s look at what this CSS code is doing, step-step:

The below code adds a CSS media query for min-width 769px:

@media ( min-width: 769px ){
}

Writing our CSS code inside this media query means that our row will only sticky to the top IF the device the user is accessing your website on is AT LEAST 769px wide.

You probably don’t want to stick this row on Tablets in their portrait orientation or anything smaller because the device is quite small, so that’s why I have included this here. You can tweak this to whatever width you like.

Our next bit of code is what sticks the item to the top of the page.

And YES – position:sticky; is a thing in CSS (super easy, I know).

.sticky-row{
   position: sticky;
   top: 0;
   z-index: 99;
}

Setting z-index:99; will ensure our sticky row always stays on top of the items on our page while we scroll down past them.

Setting top:0; just means that the row will stick to the very top of the page (i.e. 0px from the top).

If you have a sticky header on your website for your main menu, you can change the top:0; value to be whatever the height is of the header you have stuck to the top.

So, if your Site Header that is stuck on scroll and visible all the time is 80px tall, and you want your fixed row to sit under this header, you would just update the CSS to be the following:

.sticky-row{
   position: sticky;
   top: 80px;
   z-index: 99;
}

Easy, right?

Do this next

This article is part of a series of Beaver Builder tutorials where I show you advanced ways you can stick elements in Bever Builder to better the usability for your users.

In this article I showed you:

And the next tutorials in this series will build upon what you learn today to teach you:

Jump to the next lesson article below.

Next article: Beaver Builder: Sticky Menu On Scroll (Then Click To Scroll To Page Sections)