Header · Center logo

The menu splits in two around the logo. On tablets and phones: the logo on the left and a menu button.

Full-page views: desktop, phone and dark mode

At 1440px wide.

At 390px wide.

See it live: Header · Center logo 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 · Center logo   (FBK Header)
  Nav · Logo
  Nav · Menu

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 · Center logo (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 Nav · Menu › Content › Menu: pick your WordPress menu (Appearance › Menus).

Finish by hand

• Hover effects (on by default): Link effect Bubble of FBK Header (class fbk-nav--bubble; set it to None to turn it off).
• The logo sits in the middle of the bar and the menu splits around it: half the top-level links on each side (the left takes the odd one). The room for the logo is --fbk-nav-split-gap on .fbk-nav (Style > CSS); widen it for a wider logo.
• 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.
• 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.

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

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

• 05 – Header center menu (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.