Introduction

Sticky sidebars are great for keeping CTAs, lead magnets, ads, or navigation visible while users scroll through long content. In Brizy, though, a sticky sidebar is not as simple as position: sticky; because of how sections and columns are rendered. In this guide, you will see exactly how to create a floating sidebar widget in Brizy using an inner container and custom CSS that works reliably with Brizy’s flexbox layout.

​

Why sticky doesn’t work by default in Brizy

Before jumping into the fix, it helps to understand why standard sticky CSS usually fails inside Brizy layouts.

​

• Brizy sections and columns add overflow: hidden by default, which breaks position: sticky because any ancestor with overflow hidden/scroll/auto becomes the sticky reference instead of the viewport.
• Brizy columns are flex items that stretch to equal height, so a sidebar column becomes as tall as the main content column, leaving no room for the sidebar to “slide”.

Because of this, simply setting the left column to position: sticky will not give the floating effect you expect in a blog layout.

​

The “Inner Container” strategy (concept)

The solution is to stop trying to make the entire column sticky and instead make a smaller inner container sticky. Think of it like this:

• Column = the track
• Inner Div = the train that moves along that track

By placing all your sidebar elements into a shorter inner Div and making that Div sticky, you allow it to move up and down inside the taller column while keeping it pinned to the viewport as the user scrolls.

​

Step 1: Build the sidebar structure in Brizy

In Brizy, first set up your two‑column blog layout and then add the inner container that will become sticky.

​

1. Add a section for your blog layout and create two columns.

• Left column: Sidebar.
• Right column: Main blog content.

1. Inside the left column, drag in a Div/Container element.
2. Move all sidebar widgets (TOC, newsletter form, ads, categories, etc.) inside this Div so they are wrapped by a single container.
3. Select that Div → More → Advanced → give it a CSS ID (for example):
4. my-sticky-content

Demonstration: Click to View | Click to View

At this point, the sidebar column is just a normal column; the inner Div is what will be turned into the floating widget.

Step 2: Add the sticky CSS

Next, inject custom CSS so the inner container becomes sticky and Brizy’s overflow behaviour stops blocking it.

​

In Brizy Cloud (site options), open the Footer Code Injection area and paste the below code:

Demonstration: Click to View

-------------------------------------------------

<style>

 /* 1. Unlock Brizy parents so sticky can work */

 .brz *,

 .brz-section,

 .brz-row,

 .brz-columns,

 .brz-column,

 .brz-column__content {

  overflow: visible !important;

  overflow-x: visible !important;

 }

 /* 2. Make sure the column with the sticky div can align correctly */

 .brz-column:has(#my-sticky-content) {

  align-self: flex-start !important;

 }

 /* 3. Sticky inner container */

 #my-sticky-content {

  position: sticky !important;

  top: 140px !important;     /* distance below header; adjust to your header height */

  align-self: flex-start !important;

  height: fit-content !important;

  max-height: 80vh !important;  /* prevents sidebar from exceeding viewport height */

  width: 100%;

  z-index: 99;

  /* optional visual styling to keep rounded edges and spacing */

  border-radius: 12px;

  overflow: hidden;

  padding-top: 10px;

 }

 /* 4. Disable sticky on mobile/tablet for better UX */

 @media (max-width: 991px) {

  #my-sticky-content {

   position: static !important;

   margin-top: 0;

  }

 }

</style>

-----------------------------------------

What this does:

• Removes problematic overflow from Brizy’s containers so position: sticky can reference the viewport properly.
• Targets only the column that contains #my-sticky-content to align it at the top of the flex container.
• Applies position: sticky to the inner Div with a top offset so it floats a bit below your fixed header and stays visible.

You can tweak:

• top: 140px to match your header’s height and desired gap.
• border-radius and padding to match your theme’s card style.

Step 3: Test on desktop and mobile

Once the CSS is in place, test the sidebar on different devices and page types.

​

• On desktop, scroll a long blog post and confirm the sidebar starts in its normal position, then “sticks” a little below the header as you scroll.
• On mobile/tablet (below 991px), the media query switches the widget back to a normal static block, which usually works better for narrow layouts.

If any specific elements (like sliders or popups) misbehave because of the global overflow rule, you can add small override rules for those particular classes, while keeping the sticky behaviour intact.

​

Optional: What to put in your sticky sidebar

A sticky sidebar is most effective when it supports the reader journey and conversions rather than just repeating navigation.​

​

You can use it to highlight:

• Newsletter signup or lead magnet.
• “Work with me” or service CTA for SEO/marketing services.
• Related posts or popular guides from your blog.
• A mini author bio with a link to your main “SEO Expert” page.

This works especially well on long‑form content where users are engaged and more likely to interact with a visible, persistent widget.