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:

<?php

add_action( 'bricks_before_header', function () {
    ?>
    <div class="site-container">
    <?php
} );

add_action( 'bricks_after_footer', function () {
    ?>
    </div>
    <?php
} );

Step 3

Add this CSS:

body.bricks-is-frontend {
    padding-top: 100px; /* Height of header */
}

.site-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    min-height: 100vh;
    max-width: 100%; /* Prevent horizontal overflow */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

header#brx-header {
    grid-area: header;
    background-color: #010101;
    color: white;
    position: fixed;
    top: var(--wp-admin--admin-bar--height,0);
    left: 0;
    right: 0;
    z-index: 1000;
}

.site-sidebar {
    grid-area: sidebar;
    background-color: #f4f4f4;
    position: fixed;
    top: calc( var(--wp-admin--admin-bar--height, 0px) + 100px ); /* Height of header */
    left: 0;
    bottom: 0;
    width: 250px;
    overflow-y: auto;
}

.sidebar-content {
    padding: 3rem;
}

.site-container main {
    grid-area: main;
    padding: 4rem 8rem;
}

.site-container .brxe-section {
    padding-block: 0;
    padding-inline: 0;
}

.site-container main .brxe-container {
    margin-left: 0;
    width: auto;
    max-width: var(--content-width);
}

footer {
    grid-area: footer;
    background-color: #010101;
    color: white;
    text-align: center;
    padding: 1rem;
}

@media (max-width: 768px) {
    body.bricks-is-frontend {
        padding-top: 0; /* Remove top padding on small screens */
    }
    
    header#brx-header {
        position: static; /* Make header static on small screens */
        height: auto;
    }
    
    .site-container main {
        padding: 4rem;
    }

    .site-sidebar {
        position: static;
        width: 100%;
    }

    .site-container {
        display: flex;
        flex-direction: column;
    }
}

Change both instances of 100px with the height of your site’s header.

Screenshot of header template from our test site:

If you are not using ACSS, replace var(--content-width) with your container width.

Step 4

Create a section-type template named say “Sidebar”.

Add a Container, and inside that a Block and your desired sidebar elements inside the Block.

Set the HTML tag of Container to aside. Add a class of site-sidebar. Set your desired background color (blue in this example) and text color (white).

Add a class of sidebar-content to the Block.

Set template setting to bricks_before_footer.

This will result in this HTML structure:

Check on the front end.

References

Useful Action Hooks in Bricks