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 box shadow:
X: 8, Y: 8, blur: 40, color:
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:
How can I get a fixed transparent header that just uses the same background as my hero?
How can I add overlay for one or two pages only? Just add a section without img for those pages I do not want overlay?
How can we turn off sticky header on tablet/mobile?
How can we setup a secondary header to show when scrolling down ? Oxygen’s second header line was convenient, to change sizes of logo, fonts, or displaying other things when scrolling. I have found a FB thread (https://www.facebook.com/groups/brickscommunity/posts/790111931653329/) but it doesn’t work for me. Thanks in advance.
for me transition works when I manually put “background-color 0.2s, transform 0.4s;” into the Transition field. No need for extra CSS
Which version of Bricks are you using Bernt?