Header · Photo menu

Logo, social links, a phone number and a call to action; the menu comes down over the whole screen in the brand color, with a tinted photo on the left half (not on phones) and your WordPress menu, its links coming in one after another.

Full-page views: desktop, phone and dark mode

At 1440px wide.

At 390px wide.

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

Structure

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

Header · Photo menu   (FBK Header)
  Nav · Logo
  Header · Social   (FBK Social)
  Header · Phone
  Nav · Button and menu
    Button · Contact us   (FBK Button)
    Nav · Menu button
    Menu panel
      Panel · Inner
        Panel · Head
          Panel · Logo
          Panel · Close button
        Panel · Photo
          Panel · Photo (decorative)
        Panel · Menu
        Panel · Foot
          Panel · Social   (FBK Social)
          Panel · Phone
      Panel · Backdrop

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 · Photo menu (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 Header · Social, Panel · 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.
4. Select Button · Contact us (FBK Button) › Properties: Text, Link, Tone, Shadow on hover · Icon group: Icon, Icon position · Style group: Style, Size, Width, Hover effect.
5. Select Panel · Menu › Content › Menu: pick your WordPress menu (Appearance › Menus).

Finish by hand

• Hover effects (on by default, each a class you can remove): fbk-ui--grow on the social links, fbk-btn--sweep on the button; menu links step in a little (.fbk-mpanel__menu, Style > CSS).
• The panel is a Bricks Offcanvas (Menu panel, direction Top): Nav · Menu button and Panel · Close button open and close it by its class .fbk-himage (Toggle > CSS selector). Escape closes it too and the focus goes back to the menu button.
• The menu is a Bricks Nav Menu (Panel · Menu) in a column: pick your WordPress menu in its settings (Menu). Submenus open in place with their chevron (Sub menu > Static).
• The photo is Panel · Photo (decorative). Its width (45%) is in .fbk-himage__media and the room it leaves for the links in .fbk-himage (Style > CSS).
• Panel color: the classes fbk-scheme fbk-scheme--brand on Menu panel (fbk-scheme--dark for a dark panel; remove both for a light one).
• On phones the bar keeps the logo, the button and the menu button.
• 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.
• 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.
• 767px and below — .fbk-himage, .fbk-himage__media, .fbk-nav__actions, .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.

Its background is a modifier on the section, so you can swap it for any of the ones the template is checked with: fbk-section--light, fbk-section--brand.

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

Replaces

• 06 - Header from Fancy Bricks 2.0
• 06 – 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.