A shrinking sticky header is a popular web design technique that reduces the header size as visitors scroll down the page. It helps save screen space while keeping navigation easily accessible.

Although Bricks Builder provides excellent sticky header functionality, many users want additional control over how their header behaves when scrolling. One common requirement is reducing the size of the header and logo after the sticky state is activated.

A shrinking sticky header effect can be achieved in Bricks Builder with just a few lines of CSS. By targeting the .scrolling class that Bricks automatically adds to sticky headers, you can reduce the size of your header and logo while maintaining a smooth user experience.

How Bricks Handles Sticky Headers

When a header becomes sticky, Bricks automatically adds the .scrolling class to the header element.

This allows us to target the sticky state with custom CSS and apply different styles when visitors scroll down the page.

Step 1: Identify Your Header and Logo IDs

Assign IDs to the elements you want to modify.

For this example:

• Header Container ID: masthead
• Logo ID: masthead-logo

Your IDs may be different, so adjust the CSS accordingly.

Step 2: Add Smooth Transitions

Add the following CSS to create a smooth animation effect.

/*css*/
#masthead, #masthead-logo {
    transition: all .3s ease;
}

Step 3: Reduce Header Size on Scroll

When the sticky header becomes active, Bricks adds the .scrolling class. We can use this state to modify the header appearance.

/*css*/
#brx-header.scrolling #masthead {
    padding: 5px 20px;
}

Adjust the padding values to suit your design.

Step 4: Resize the Logo

To make the logo smaller when scrolling:

/*css*/
#brx-header.scrolling #masthead-logo {
    width: 120px;
}

Modify the width as needed for your branding.

Optional: Move the Header Up Slightly

If you want the sticky header to sit higher on the page, you can use:

/*css*/
#brx-header.scrolling {
    transform: translateY(-40px);
}

Adjust the value to achieve the desired effect.

Complete Example

/*css*/
masthead, #masthead-logo {
   transition: all .3s ease; 
}

#brx-header.scrolling #masthead { 
   padding: 5px 20px; 
} 

#brx-header.scrolling #masthead-logo { 
   width: 120px; 
} 

#brx-header.scrolling { 
   transform: translateY(-40px); 
}

Final Thoughts

The .scrolling class remains one of the simplest and most effective ways to customize sticky header behavior in Bricks Builder. By combining CSS transitions with Bricks’ built-in sticky header functionality, you can create professional scroll effects without additional plugins or JavaScript.

This technique has been tested with recent versions of Bricks Builder and continues to work reliably for creating shrinking headers and logo animations. You’re already seeing it in action—the header on this page uses the same shrinking sticky header effect described above.

Have questions, suggestions, or a different approach? Feel free to share your thoughts in the comments below—I’d love to hear how you’re using Bricks Builder in your projects.