Header · Mega menu featured

Logo and a menu with two mega menus: three columns of links with a featured case study at the side, and a row of recent projects with a strip at the foot. Each mega menu is a card as wide as the bar; on phones it slides in over the menu.

Full-page views: desktop, phone and dark mode

At 1440px wide.

At 390px wide.

See it live: Header · Mega menu featured 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 · Mega menu featured   (FBK Header)
  Nav · Logo
  Nav · Menu
    Nav · Items
      Nav · Close button
      Nav · Dropdown Services
        Nav · Submenu Services
          Nav · Row
            Nav · Main
              Nav · Columns
                Nav · Column Services
                  Links · What we do   (FBK Link list)
                    Links · Menu What we do
                Nav · Column Studio
                  Links · Studio   (FBK Link list)
                    Links · Menu Studio
                Nav · Column Explore
                  Links · Explore   (FBK Link list)
                    Links · Menu Explore
              Nav · Foot
                Nav · Foot text
                Button · Book a call   (FBK Button)
            Card · Case study   (FBK Card)
              Card · Media
                Card · Photo   (FBK Image)
              Button · Read the case study   (FBK Button)
      Nav · Dropdown Work
        Nav · Submenu Work
          Nav · Group Projects
            Nav · Label Projects
            Nav · Grid Projects
              Mini card · Harbor Hotels   (FBK Mini card)
              Mini card · Pinecrest Clinic   (FBK Mini card)
              Mini card · Lumen Energy   (FBK Mini card)
          Nav · Foot
            Nav · Foot text
            Button · All projects   (FBK Button)
      Nav · Link Pricing
      Nav · Link Contact
      Nav · Panel extras
        Panel · Buttons
          Button · Sign in (panel)   (FBK Button)
          Button · Start a project (panel)   (FBK Button)
    Nav · Menu button
  Button · Sign in   (FBK Button)
  Button · Start a project   (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.

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

1. Paste the template in Bricks first — see Copy and paste.
2. Select Header · Mega menu featured (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 Links · What we do, Links · Studio, Links · Explore (FBK Link list) › Properties: Title, Title tag, Hide title · Style group: Layout, Look, Tone, Shape, Size, Hover effect, Alignment, Background.
4. Select Button · Book a call, Button · Read the case study, Button · All projects (+4 more) (FBK Button) › Properties: Text, Link, Tone, Shadow on hover · Icon group: Icon, Icon position · Style group: Style, Size, Width, Hover effect.
5. Select Card · Case study (FBK Card) › Properties: Title, Title level, Text, Hide text · Style group: Highlight, Title size, Look, Tone, Shape, Photo overlay, Padding, Photo hover, Background · Layout group: HTML tag, Layout.
6. Select Card · Photo (FBK Image) › Properties: Image, Alt text · Shape group: Proportion, Shape, Decoration, Border · Size and loading group: Loading, Width, Max width, Alignment · Caption group: Caption, Hide caption.
7. Select Mini card · Harbor Hotels, Mini card · Pinecrest Clinic, Mini card · Lumen Energy (FBK Mini card) › Properties: Thumbnail, Title, Link, Title tag, Text · Show or hide group: Hide text, Hide thumbnail · Style group: Look, Tone, Shape, Accent, Hover effect, HTML tag, Background.
8. Select Nav · Menu › the menu items are elements inside it: add, remove or reorder them in the Structure panel.
9. Select Links · Menu What we do, Links · Menu Studio, Links · Menu Explore › Content › Menu: pick your WordPress menu (Appearance › Menus).

Finish by hand

• Hover effects (on by default, each removable): fbk-links--slide on each FBK Link list (or set its Link effect), the photo tilt of the featured FBK Card (its Photo hover), fbk-btn--sweep on the buttons and the underline on the bar links (Link effect of FBK Header).
• A mega menu is a Nav-Nested Dropdown with Mega menu on (CSS selector .fbk-nav). Its content is a block with the class fbk-nav__mega. Services is a Nav · Row (fbk-nav__mega-row: a main area and a side column, 2 to 1): on the left Nav · Columns (fbk-nav__cols--3: three columns) and a Nav · Foot (fbk-nav__mega-foot: a strip with a line of text and a button), on the right the featured card. Work is a Nav · Group (a label and a grid of cards, fbk-nav__grid) and a Nav · Foot.
• Columns of links: FBK Link list, pick a WordPress menu in its Nav Menu. Featured: FBK Card with its photo (FBK Image, 16:9, Viewfinder corners) in the media slot and a button. Projects: FBK Mini card (thumbnail, title, text, link).
• Mega menu width is a property of FBK Header: Container (a card as wide as the bar, here) or Full width. Phone submenus: Slide (here) or In place.
• Nav · Panel extras (class fbk-nav__panel-only) only shows in the phone menu: the buttons the bar hides on phones.
• 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, .fbk-nav__cols, .fbk-nav__mega-row (+1 more).
• 767px and below — .fbk-nav__actions, .fbk-nav__nested, .fbk-nav__panel-only (+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.

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.