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:

  • sticky header with a background color
  • sticky header with transparent background (overlay)

Also, we can specify that the sticky slide up after scrolling down certain pixels. This can be set to smoothly re-appear when scrolling up. There’s no need for Headroom.js for hiding the header on scroll.

Sticky header settings can be accessed by editing the Header Template with Bricks → Settings (gear) icon → TEMPLATE SETTINGS → HEADER → STICKY HEADER.

Sticky Header controls explained:

  • Sticky header: enables the sticky header feature.
  • Sticky on scroll: keeps the sticky header in “regular” mode i.e., not as an overlay.
  • Slide up after (px): enables headroom-like functionality i.e., header disappears after scrolling down the specified pixels and automatically re-appears when scrolling up.
  • Scrolling text color: applies the specified color to hyperlinks in the Nav Menu element – screenshot.
  • Scrolling background: applies the specified color as background color for the header. If this is not set, the header (#brx-header.sticky.scrolling > .brx-nestable) will get a transparent background.
  • Scrolling box shadow: applies the specified box-shadow to the header [sample selector: #brx-header.sticky.scrolling:not(.slide-up) > .brx-nestable] upon scrolling.
  • Transition: to change the default transition property to the header (the placeholder value applies by default)

Sticky header settings in our test site:

Scrolling background: #ffffff

Scrolling box shadow:
X: 8, Y: 8, blur: 40, color: #e0e0e0

Sticky header with a background color (no overlay)

Sticky header with transparent background (overlay)

Turn off or disable Sticky on scroll to turn on or set a transparent background for the sticky header i.e., make it an overlay.

Since the header “collapses” in this mode, you need to set/increase the top padding for your first section (the one that follows the header).

Auto hiding and re-appearing on scroll (headroom-style)

Set a width value after which the header should begin to automatically slide up when scrolling down and slide down when scrolling up.

This works in both the regular and overlay modes covered above i.e., regardless of whether “Sticky on scroll” is enabled or not.

Below screencast show it in the overlay mode:

Leave a Reply to ASTA (Cancel Reply)