Header · Two rows

Two rows: phone, a centered logo and a call to action on top; the menu and social links in a soft band below. The header stays at the top: scrolling down, the top row slides away and only the menu band stays; it comes back when you scroll up. On tablets and phones the menu opens as a side panel.

Full-page views: desktop, phone and dark mode

At 1440px wide.

At 390px wide.

See it live: Header · Two rows on fancybricks.co — the live preview, and the button that copies it.

In the builder

Preview on the front end. Scripts don't run inside the builder, so here you only see the layout: the top row only tucks away while scrolling a page on the front end (it needs the script). Save and open the page to see the full result.

Structure

This is what the Bricks Structure panel shows after you paste the template. Component instances say which component they are.

Header · Two rows   (FBK Header)
  Header · Top row
    Header · Phone
    Nav · Logo
    Button · Book a stay   (FBK Button)
  Nav · Menu
  Header · Social   (FBK Social)
  Header · Tuck script (needs Execute code)

The template also pastes a dashed note above the section, with the short version of this page. It only shows inside the builder, never on the published page — see Builder notes.

How to adjust

Every step is the same move: pick the element in the Structure panel, change its Properties.

Where are those panels?

How to adjust a template shows every one of them in a screenshot of the real builder: the Structure and Properties panels, the classes on an element, a component's style families and the field where a CSS variable goes.

The classes this element carries, in the Bricks panel.

This template's own component, with its Style group open.

1. Paste the template in Bricks first — see Copy and paste.
2. Select Header · Two rows (FBK Header) › Properties: Layout group: Layout, Menu panel, Phone menu text size, Position, Mega menu width, Phone submenus · Style group: Link effect, Submenu link effect, Submenu opening, Bar style, Background · Show or hide group: Hide actions.
3. Select Button · Book a stay (FBK Button) › Properties: Text, Link, Tone, Shadow on hover · Icon group: Icon, Icon position · Style group: Style, Size, Width, Hover effect.
4. Select Header · Social (FBK Social) › Properties: Networks group: Facebook link, Instagram link, X link, LinkedIn link, YouTube link, TikTok link, Hide Facebook, Hide Instagram, Hide X, Hide LinkedIn, Hide YouTube, Hide TikTok · Style group: Look, Tone, Shape, Size, Show names, Hover effect, Background.
5. Select Nav · Menu › Content › Menu: pick your WordPress menu (Appearance › Menus).

Requirements

• Code execution. Needs "Execute code" enabled for the role in Bricks → Settings → Custom code, or the JS block shows as plain text instead of running.

What each requirement is, and how to set it up once for the whole site: Requirements.

Finish by hand

• Hover effects (on by default): Link effect Highlight and Submenu link effect Side bar of FBK Header (classes fbk-nav--highlight and fbk-nav--sub-bar; set them to None to turn them off); fbk-btn--sweep on the button; fbk-ui--grow on the social links.
• The top row Header · Top row (phone, logo, button) sits in the Top slot of FBK Header; the bar's own logo slot stays empty.
• Tucking top row: only with Position Sticky (FBK Header). Rows with the class fbk-header__tuck slide out of view while scrolling down and come back when scrolling up or at the top of the page; the header keeps its place, so the content never jumps (no motion with reduced motion). To keep both rows, remove fbk-header__tuck from Header · Top row (and the element Header · Tuck script); for a header that scrolls away, set Position to Normal.
• The soft band around the menu is Bar style Band of FBK Header; its color: --fbk-nav-band-bg on .fbk-nav (Style > CSS).
• The header is the FBK Header component: put your logo, menu and buttons in its slots (Logo, Menu, Actions; a top bar or a row over the bar goes in the Top slot, rows and scripts under it in the Bottom slot). Layout, link effect, submenu effect, menu panel, position (sticky, over the hero), bar style and background are its properties.
• The menu is the Bricks Nav Menu (Nav · Menu): pick your WordPress menu in its settings (Menu). Here it shows the demo menu Fancy Bricks demo, with submenus and sub-submenus; on your site, until you pick one, Bricks shows one of your menus. Its sizes and colors are Nav Menu settings saved in the class .fbk-nav__menu (Top level, Sub menu, Mobile menu).
• This is a Bricks header template: in your site set where it shows (Template settings > Conditions), or paste its section into your own header template.

On phones

The template is designed desktop first, the Bricks default, and only changes at the two widths the library uses:

• 991px and below — .fbk-nav, .fbk-nav__menu.
• 767px and below — .fbk-hstacked, .fbk-nav__actions, .fbk-nav__menu, .fbk-section.

Those changes live in Bricks' own breakpoint fields, so you edit them where you always do: pick the breakpoint in the toolbar and the same fields follow.

Careful with the classes shared by the whole library (fbk-section, fbk-intro, the component classes): a change there shows up in every template that uses them.

If your site's breakpoints are set up mobile first, copy the mobile-first variant of the template instead — see Copy and paste.

Accessibility

In this template, keyboard focus is visible on every interactive piece; movement is cut back when the visitor's system asks for less motion; the state screen readers need is already set (aria-hidden, aria-label).

What is checked on every template, and what depends on your own palette: Accessibility.

Dark mode

This section stays light whatever your site does: it does not carry the fbk-section--auto-dark class, which is only added to templates checked on a dark background.

How the library follows your site's color scheme: Dark mode and preview.

Replaces

• 02 - Header (Class-based) from Fancy Bricks 1.0

What happened to the old libraries, and what to do with pages already built with them: Migrating from 1.0/2.0.