Top Bar Above Sticky Header in Bricks

This Pro tutorial provides the steps to set up a top bar above sticky header in Bricks Builder such that only the header remains sticky when scrolling and not the top bar.

Step 1

Edit your Header template and add your top bar section if it's not already present. Save it as a section template.

Alternatively, you could go to the list of Templates and create a new one.

Step 2

Set your header as sticky by editing your Header template with Bricks → Settings → TEMPLATE SETTINGS → HEADER and enabling "Sticky header" setting.

You might want to set your desired header background color when it becomes sticky using the "Scrolling background" control.

Step 3

Let us output this Top Bar template above the header using the bricks_before_header hook.

Add this in your child theme's functions.php or a code snippets plugin: