Beaver Builder: Sidebar full width/height background

Have you ever tried to make a sidebar with a custom background color that spans the entire width and height? And by entire width I mean that the background expands to the border of the browser window, crossing the main site margins. Let me show you how easy it is to achieve this with Beaver Builder.

The idea behind this can be used with any HTML layout as it’s basically just adding the right HTML structure and a few lines of CSS.

The idea behind this can be used with any HTML layout as it’s basically just adding the right HTML structure and a few lines of CSS.

Beaver Builder - how to add a 2 Columns row module to your layout

Let’s start by making a two column row in Beaver Builder. Drag the ‘2 Columns’ Row Layout module into your page.

Beaver Builder settings to set the width of a row

This method I’m showing you can only work if the Beaver Builder Row is set to ‘Full Width’. So enter the row settings by clicking on the wrench when hovering over the row and set the width of our row to ‘Full Width’. We don’t change the ‘Content Width’ of the row as we still want our content to follow the main margins of our website. So, leave this set to ‘Fixed’.

How to set a custom column width within Beaver Builder

Turn one row into a sidebar by adjusting the widths of the columns. We’re setting the column on the left side to a width of 67%. The other column will have a width of 33% automatically. You can choose whatever width percentages you’re comfortable with.

A Beaver Builder page with some dummy content

To make it more visual add some elements to both of the columns. We’ve added some HTML modules and a button. We’ve used random Lorem Ipsum placeholder text to give the HTML modules some content. A quick search on Google returns several results for ‘Lorem Ipsum Generator’. This is a handy and really nice one for example.

Now we need to add two custom CSS class selectors:

Where to enter the Beaver Builder Column settings and add in custom CSS class selectors to the row and column element

It doesn’t matter how you call your selectors. On the row element we add ‘wbm-row-sidebar-full-width-background’ as a class selector. Next, we add ‘wbm-col-sidebar-full-width-background’ as a CSS class selector to the column that’s representing our sidebar.

Now it’s time to add our CSS to get the result we want. I personally prefer to use an external CSS file. But if you don’t know how that works, Beaver Builder make’s it quite easy to add your own custom CSS.

Beaver Builder places to put custom CSS

On top of the screen click on the ‘Tools’ button. Now you have two options to add custom CSS in Beaver Builder: page specific CSS or global CSS. If you want this CSS to apply only to the current page, you need to click on ‘Layout CSS / Javascript’ in the popup window. If you want it to apply for your entire website (for every single page) you should choose ‘Global Settings’. Whichever choice you make, you’ll end up with a field where you can add your custom CSS.

Add following CSS lines to your preferred CSS field and click Save:

.wbm-row-sidebar-full-width-background .fl-row-content-wrap {
    position: relative;
    overflow: hidden;
}
.wbm-col-sidebar-full-width-background .fl-col-content:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 1500px;
    height: 100%;
    background: #eeeeee;
    visibility: visible;
    z-index: -99;
}

We’re adding the background to our sidebar column by using the before pseudo-element. Basically, we’re giving this element a height of 100% and a width that’s wide enough to cover even the largest screens. Don’t worry, you won’t see the entire width of that element, only the part that stretches to the border of the browser window. To achieve this we give the parent element a position of relative and an overflow of hidden.

Build a sidebar with a full width/height background in Beaver BuilderClick To Tweet

To finish off we’re going to make this sidebar play well no matter the screen size. In other words, we’ll make its behavior responsive. We need to add one media query to get what we want:

@media screen and (max-width: 768px) {
    .wbm-col-sidebar-full-width-background .fl-col-content:before {
        display: none;
    }
    .wbm-col-sidebar-full-width-background {
        background: #eeeeee;
    }
}

On a small screen size the sidebar jumps beneath the main content block rendering our background very weird. With this media query, we just make the before pseudo-element invisible by setting the display to none. Then we add the same background color directly to our sidebar column.

Beaver Builder settings to set the breakpoint in pixels for medium and small devices

How do I know to use 768px as a breakpoint? In Beaver Builder there are always two breakpoints: medium and small. You can set each breakpoint in the global settings of Beaver Builder. Click on the ‘Tools’ button and choose for Global Settings. As you scroll down you’ll notice the width in pixels for both breakpoints. You can use the default values (1024px for medium and 768px for small) or dial in your own custom values.

Column settings for Beaver Builder to apply a certain width when on a small device

One last thing. By default, Beaver Builder makes the column not spanning the entire width when entering the small screen. You can easily alter this behavior by going into the ‘Column Settings’ and on the Advanced tab changing the ‘Small Device Width’ to Custom and entering a value of 100%.

Let’s wrap up. Here is the entire CSS to make this thing work:

.wbm-row-sidebar-full-width-background .fl-row-content-wrap {
    position: relative;
    overflow: hidden;
}
.wbm-col-sidebar-full-width-background .fl-col-content:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 1500px;
    height: 100%;
    background: #eeeeee;
    visibility: visible;
    z-index: -99;
}
@media screen and (max-width: 768px) {
    .wbm-col-sidebar-full-width-background .fl-col-content:before {
        display: none;
    }
    .wbm-col-sidebar-full-width-background {
        background: #eeeeee;
    }
}

Koen Adams

Coding has always been fun to me. There's a lot to learn and after all those years I'm still learning a lot in my quest to be a great full stack developer in the WordPress space.

Reader Interactions

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *