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:

Instant access to 390+ Bricks code tutorials with BricksLabs Pro

7 comments

  • 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

  • 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?

  • 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

Leave a Reply to David (Cancel Reply)