Sticky Scrolling in Bricks Builder

Updated on 22 Apr 2024

This Pro tutorial provides the steps to fix elements in the viewport i.e., make them sticky while adjacent content in the section continues to scroll in Bricks.

The key is setting Position: sticky for the container having the element(s) you want to be in fixed position.

We need to add a bit of custom CSS to ensure that the sticky containers maintain their top value when the admin bar is showing.

Step 1

Page Export

An export file of the fully built Page is provided near the end.

Manual setup instructions are below.

Create a Page and edit it with Bricks, add a Section having a Container.

Column gap: 60px.

Add 2 Containers (columns) inside.

Give the left column a class of say, sticky.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 525 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Accordion Grid Query Loop in Bricks

Accordion Grid Query Loop in Bricks

How to set up a accordion in Bricks such that the "titles" are arranged in a grid with the full width content opening below.
Categories:
Download Area with HappyFiles

Download Area with HappyFiles

Aside from the series I'm currently writing on how to create custom galleries and sliders with HappyFiles, Metabox and Bricks, I have developed a snippet…
Categories:
How to Add a Dot Separator Between Nav Menu Items in Bricks

How to Add a Dot Separator Between Nav Menu Items in Bricks

Looking to add a circular dot separator between the nav menu items in your Bricks site? Add the following at Bricks → Settings → Custom…
Categories:
Tags:
Pro
Custom WordPress Dashboard Page in Bricks

Custom WordPress Dashboard Page in Bricks

Updated on 10 Jul 2024 This Pro tutorial provides the steps to replace all the meta boxes of the WordPress admin dashboard page with the…
Categories:
Tags:
Pro
Sticky Header Only For Visitors in Bricks

Sticky Header Only For Visitors in Bricks

A user asked: Anyone know if its possible to make the sticky of the header conditional only for logged out users? This Pro tutorial shows…
Categories:
Pro
Meta Box/ACF Images Staggered Grid Gallery in Bricks

Meta Box/ACF Images Staggered Grid Gallery in Bricks

Showing images from two Gallery-type of ACF or Image Advanced-type of Meta Box fields in a staggered grid layout.
Pro
Mmenu Light in Bricks

Mmenu Light in Bricks

Here's the steps to implement Mmenu Light for a sliding OffCanvas mobile menu in Bricks.
Categories:
Pro
Search Results Template in Bricks

Search Results Template in Bricks

Updated on 26 Oct 2023 This Pro tutorial provides the steps to set up a search template in Bricks with these features: Step 1 Create…
Categories: