Building a header template

Let’s build a global header with a logo and menu.

Create the template

1. Go to Bricks > Templates
2. Add New: “Header”
3. Edit with Bricks

Settings

1. Settings (gear) > Template Settings
2. Type: Header
3. Conditions: Entire Website

Build the structure

1. Add a Section
2. Inside the Container:
   • Add a Logo element (or Image/Text)
   • Add a Nav Menu element (we’ll use the standard WordPress menu)

Style the layout

Container:

1. Direction: Row (horizontal)
2. Justify content: Space between (pushes logo and menu apart)
3. Align items: Center (vertically aligned)

Section:

1. Background color: Pick a light gray or your brand color
2. Padding: 12 top/bottom (this intentionally overrides our global 80px for this specific section)

Your header is part of the site chrome, not page content. It usually needs tighter spacing than regular sections, so it is a good place to make a deliberate exception to your global section padding.

Configure the menu

1. Select the Nav Menu element
2. Choose your WordPress menu source (if you haven’t created one in Appearance > Menus, do that first)
3. Show at breakpoint: Never (this keeps the desktop menu visible always, or choose a breakpoint for mobile toggle)
   • Note: For this simple tutorial, we’re keeping it basic.

Save and verify

1. Save the template
2. Go to your Pages panel (top bar) -> Home
3. You should see your new header sitting perfectly atop your hero section!