Opens in a new tab
6th Mar '24
/
2 comments

Fixed Sidebar Layout in Bricks

A user asked:

This Pro tutorial provides the steps to set up a fixed left (or can be on the right) sidebar using hooks and some custom PHP and CSS in Bricks.

Step 1

Create a Bricks template of type Section named say, "Sidebar".

Edit it with Bricks.

Add a Block.

Change its element ID to site-sidebar.

Set its width to say, 300px.

Do other styling like setting background color, text color, padding, row and column gap.

Add your desired elements inside.

Template settings:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Click-type Infinite Scroll in Bricks Builder

Click-type Infinite Scroll in Bricks Builder

This Pro tutorial provides the steps to set up "click to load more" posts using Infinite Scroll JS in Bricks builder. Step 1 Edit your…
Categories:
Width and Height of Mobile Hamburger Toggle in Bricks

Width and Height of Mobile Hamburger Toggle in Bricks

Looking to change the size of Bricks hamburger toggle in the mobile menu? The default width value of 20px can be changed by selecting the…
Categories:
Pro
How to Combine Multiple Menus into Bricks’ Mobile Menu

How to Combine Multiple Menus into Bricks’ Mobile Menu

Bricks' native 'Nav Menu' element comes with a built-in mobile menu, which shrinks the menu down to a menu toggle button to open an offcanvas…
Categories:
How to wrap main element in custom divs in Bricks

How to wrap main element in custom divs in Bricks

Looking to wrap the main element that is between header and footer with some custom div(s)? Bricks provides ample hooks throughout its codebase. Add this…
Categories:
Tags:
Pro
Horizontal Scrolling Sections in Bricks Using GSAP’s ScrollTrigger

Horizontal Scrolling Sections in Bricks Using GSAP’s ScrollTrigger

In this Pro tutorial we'll use GSAP's ScrollTrigger library in Bricks to create a section that will scroll horizontally across a number of full width…
Pro
Team Member Photos Stack with Hover Tooltips in Bricks

Team Member Photos Stack with Hover Tooltips in Bricks

Herman Baiatian shared in the Bricks Facebook group here that he worked on overlapping team member headshots showing info in hover tooltips. I recreated it…
Categories:
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…
Categories:
Pro
Masonry + Click-type Infinite Scroll in Bricks

Masonry + Click-type Infinite Scroll in Bricks

This Pro tutorial provides the steps to lay out posts in a masonry style with a View More button, which, when clicked, loads the next…
Categories: