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:
Update – Available in BricksExtras
This functionality can all be added conditionally (per page/template) via the BricksExtras’ Header Extras feature.
9 comments
Brad G
I wasnt able to sort out the "headroom style" in Bricks Extras... would you mind explaining how to get that effect where a header row reappears on scroll back up?
David Browne
Hi Brad,
There's a setting in the 'Header Extras' tab (found in the page/template settings) called 'Hide Header', which adds the functionality of hiding the header when the user scrolls down (either fade or slide up) and then reveals when scrolls up.
If you have issues, go to the BricksExtras support portal and we can take a look. But it should just be a case of enabling that setting and configuring how you need it, which breakpoint it's enabled on etc.
Dominik Kasztelaniec
Hi Sridhar,
1. I'm using 1.7.1 - there seems to be some error with return value - don't know which one, but WP Code Box fixed it for me.
2. If I want to apply a native hover effect for menu items, how can I disable an hover effect for that image item?
Thanks
David
How can I get a fixed transparent header that just uses the same background as my hero?
Vince Balk
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?
ASTA
Hi Sridhar,
How can we turn off sticky header on tablet/mobile?
Regards,
ASTA
Antoine Lippens
Hi,
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.
Bernt Kopper
Hi,
for me transition works when I manually put "background-color 0.2s, transform 0.4s;" into the Transition field. No need for extra CSS
Regards,
Bernt
Sridhar Katakam
Which version of Bricks are you using Bernt?