Skip to main content

Header · Top bar

A thin top bar with e-mail, phone and social links over the main bar: logo, menu and a call to action.

Header · Top bar

Full-page views: desktop, phone and dark mode

Header · Top bar, desktop at 1440px wide

At 1440px wide.

Header · Top bar, on a phone at 390px wide

At 390px wide.

See it live: Header · Top bar 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 · Top bar   (FBK Header)
  Header · Top bar row
    Header · E-mail group
      Header · E-mail
    Header · Phone group
      Header · Phone
    Header · Social   (FBK Social)
  Nav · Logo
  Nav · Menu
  Button · Book a call   (FBK Button)

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.

The classes this element carries, in the Bricks panel.

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

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

  1. Paste the template in Bricks first — see Copy and paste.
  2. Select Header · Top bar (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 (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 · Book a call (FBK Button) › Properties: Text, Link, Tone, Shadow on hover · Icon group: Icon, Icon position · Style group: Style, Size, Width, Hover effect.
  5. Select Nav · Menu › Content › Menu: pick your WordPress menu (Appearance › Menus).

Finish by hand​

  • Hover effects (on by default): Link effect Growing line and Submenu link effect Underline of FBK Header (classes fbk-nav--line and fbk-nav--sub-line; set them to None to turn them off); fbk-btn--sweep on the button; fbk-ui--grow on the social links.
  • Contact links: Header · E-mail and Header · Phone (set their links to mailto: and tel:). The e-mail group hides on phones (class fbk-header__group--wide).
  • Social links: the FBK Social component (links, networks and style in its properties).
  • The top bar Header · Top bar row sits in the Top slot of FBK Header.
  • 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-header__group, .fbk-nav__actions, .fbk-nav__menu (+1 more).

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​

  • 04 - 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.