Making Bricks Sticky Header Static at a Breakpoint

As of Bricks 1.9.4, there is no option to set a breakpoint at which the sticky header should stop being sticky.

We can add the following block of CSS code in the header template → Settings → Page Settings → Custom Code → Custom CSS:

@media (max-width: 991px) {
  #brx-header.sticky.on-scroll {
    position: static;
  }
}

Replace 991 with your desired breakpoint.

Reminder: This is how sticky header can be enabled in Bricks when editing the header template ↓

For more/better control of the site header, you might want to use Header Extras / Rows from our BricksExtras.

Get access to all 526 Bricks code tutorials with BricksLabs Pro

2 comments

  • Dragan Vukicevic

    With 1.10 the class is .scrolling and not .on-scroll, but this is still a quick and easy solution for mobile static header.

Leave your comment

 

Related Tutorials..

Pro
How to Hide the Header Initially and Show It After Scrolling Down in Bricks

How to Hide the Header Initially and Show It After Scrolling Down in Bricks

Hiding the header when the scroll position is at the top and reveal it after the user scrolls down.
Categories:
Tags:
Sticky Header in Bricks

Sticky Header in Bricks

Updated on 15 Nov 2022 Bricks has a handy sticky feature that enables us to build two types of sticky headers: Also, we can specify…
Categories:
Pro
Top Bar Above Sticky Header in Bricks

Top Bar Above Sticky Header in Bricks

How to set up a top bar above sticky header in Bricks Builder so only the header remains sticky when scrolling.
Categories:
Tags:
Pro
Centered Image Logo in Bricks

Centered Image Logo in Bricks

Updated on 8 Mar 2023 This Pro tutorial provides the steps to add a logo image as the center menu item that shrinks when the…
Categories: