Header Extras / Rows

BricksExtras adds more settings to the header template and a new ‘header row’ element to help you more easily build multi-row headers with support for adding overlay headers & sticky headers conditionally per page/template at different breakpoints. Header rows can be set to display or hide based on if the header is currently sticky or overlay.

The video below walks through the features/settings

Setting up Overlay & Sticky Headers Globally

Head to your header template and go to settings > template settings > header extras. Anything you set here will be the default globally, and then can be disabled or reconfigured per template/page if needed.

Note – make sure to add a z-index to the header inside of the overlay heading settings so the header is above the content.

Setting up Overlay & Sticky Headers Per Page/Template

If the majority of the site doesn’t need an overlay or sticky header, it may make more sense to leave it disabled in the header template and instead set it up on the individual pages or templates where it’s required.

Go to either..

  • settings > page settings > header extras
  • settings > template settings > header extras

depending if you’re editing a template or an individual page. It’s the same process for disabling per page/template if you’ve already made it global.

Sticky Headers

The sticky headers in Header Extras settings is different to the native Bricks sticky header in a number of ways to make it more flexible..

  • Can be set at a specific breakpoint and conditionally enabled/disabled per page/template.
  • Supports use with overlay headers without needing to manually correct for top content padding.
  • Hide at a certain scroll distance can be changed per page/template.
  • Allows for different header rows to be conditionally hidden/shown when sticky or when overlay.

Support FAQ

How to make a shrinking header? – A shrinking header is essentially a sticky header where the header row height changes when the header becomes sticky.

  • Set the header to be overlay (you can add a background color to header rows while overlay, but using overlay will give the best results for a shrinking header)
  • In the sticky header settings.. set the sticky scroll distance to 0 (so the header is sticky immediately after scrolling)
  • Then be sure to add a transition duration to the header row so the animation is visible. (also in the header extras settings)
  • In the header row settings, set a new sticky header height for the header row when it’s sticky.

The header row will now animate to the new height as soon as the site visitor starts to scroll.

Can I use my existing ‘section’ header with the new overlay settings? – Yes, the header will overlay the page content in the same way (and the section background removed). Header rows add more options, specific to being inside of headers, but aren’t required just to make the header overlay the top section. However, if you need to use sticky headers with your overlay header.. use the header extras sticky header, not the Bricks’ native sticky header.

How to add header settings to just one page? – Instead of setting things up inside your header template, go to the individual page and edit in Bricks. Then go to page settings > header extras.

I can’t click on the elements inside my overlay header – Make sure to add header z-index in the overlay header settings.