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:
Hook name: bricks_before_site_wrapper
Step 2
Let’s wrap header, content and footer in a div.site-wrapper.
Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:
<?php
add_action( 'bricks_before_header', function () {
echo '<div class="site-wrapper">';
} );
add_action( 'bricks_after_site_wrapper', function () {
echo '</div>';
} );
Step 3
Add this CSS:
@media (min-width: 992px) {
.brx-body.bricks-is-frontend {
height: 100vh;
flex-direction: row;
}
.brx-body.admin-bar.bricks-is-frontend {
height: calc(100vh - var(--wp-admin--admin-bar--height,0));
}
.bricks-is-frontend #site-sidebar {
flex: 0 0 auto;
}
.bricks-is-frontend .site-wrapper {
flex: 1 1 auto;
overflow: auto;
display: flex;
flex-direction: column;
}
}Check the front end.