23rd Oct '24
/
0 comments

Another Fixed Sidebar Layout in Bricks

We showed how to set up a Fixed Sidebar Layout in Bricks in the past.

This Pro tutorial for Bricks users shows another variation wherein the the main content and sidebar are sandwiched between the site header and footer.

Step 1

Set up the perfect Bricks Page template.

Step 2

Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Tagged:
Bricks
CSS Grid
Fixed Sidebar
Layouts
Pro

Sridhar Katakam

Sridhar Katakam is a Bricks enthusiast. He likes helping others by researching and solving WordPress-related problems and building websites.

Get access to all 627 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
CSS Grid for Posts Element in Bricks

CSS Grid for Posts Element in Bricks

The "Posts" element in Bricks has "Grid" as the default layout but the actual CSS it applies on the page feels hacky with negative margins…
Read more →
Categories: Bricks, Pro
Tags: CSS, CSS Grid, Posts
Pro
Reading Progress Bar in Bricks

Reading Progress Bar in Bricks

This Pro tutorial provides the steps to implement a reading progress bar in Bricks builder. Step 1 Add the progress element as the first child…
Read more →
Categories: Bricks, Pro
Tags: Reading Progress
Pro
Stacking Post Cards in Bricks

Stacking Post Cards in Bricks

How we can stack posts in a query loop so they stick on top of the previous one when scrolling.
Read more →
Categories: Bricks, Pro
Tags: Sticky
Pro
Bricks Query Loop Cards with Hover Image

Bricks Query Loop Cards with Hover Image

How images uploaded to posts can appear when the featured images in a Bricks posts query loop are hovered.
Read more →
Categories: Bricks, Plugins, Pro
Tags: Hover Image
Pro
Sticky Scrolling in Bricks Builder

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…
Read more →
Categories: Bricks, Pro
Tags: CSS
Pro
Oxygen’s Focus Section in Bricks

Oxygen’s Focus Section in Bricks

These are the steps to implement Focus Section, an Oxygen’s composite element, in Bricks.
Read more →
Categories: Bricks, Pro
Tags: IntersectionObserver
Pro
How to Hide the Header Initially and Show It After Scrolling Down in Bricks

How to Hide the Header Initially and Show It After Scrolling Down in Bricks

Hiding the header when the scroll position is at the top and reveal it after the user scrolls down.
Read more →
Categories: Bricks, Pro
Tags: Header