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

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

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’ll be covering the following:

The easiest way to stick a row to the top of your page when scrolling using Beaver Builder

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

How to stick a menu to the top when scrolling.
How to scroll to a section on the page when you click an item in this Menu
How to sticky items in your sidebar to the top of your page when your scroll

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.

We’re going to stick the black row to the top on scroll so that the Register Now button is accessible for our users as they scroll the page.

Let’s help Bill set this up.

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.

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?

So let’s keep this tutorial short and jump into the next one where we take what we’ve learnt today and go a bit more advanced.

Jump to the next lesson article below.

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

Hey! I'm Grant Ambrose,

My WordPress website generates millions of dollars in sales each year and I put together this website to help you do the same

I believe that a lot of the time, we aren't doing things that will help our business NOT because we don't know how to do it, but rather we don't even know it is possible. My website aims to change this. My website is here to help show YOU what is possible - what YOU could set up in your business with WordPress to increase sales, automate tasks and (ultimately) turn your ideas into working WordPress solutions.

Leave a Reply

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

row-general-opt-in
row-general-opt-in
Grow your WordPress business by getting...
My best tips to your inbox!

I'll send you emails when I publish content I think will help you and your business. You can opt-out at any time and change the topics of emails you get.

This site is not a part of the Facebook website or Facebook Inc. Additionally, this site NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.

Scroll to Top