Flexi Header

Customizable header template.

Dependencies

• Animated Menu Button
• Search Input

How to

The Flexi Header component is a customizable, accessible main navigation.

To modify the layout (past the 'md' breakpoint), edit the flexbox utility classes applied to the .f-header__nav-grid and .f-header__list elements.

To modify the logo, make sure to update the content of .f-header__logo in both the .f-header__mobile-content and .f-header__nav elements. The first logo is the one displayed on smaller devices, the second one is visible on bigger screens. Also, set the correct logo width by updating the CSS custom property:

:root {
  --f-header-logo-width: 130px; 
}

If you want the header to be fixed, from the .f-header element:

• Remove the .position-relative utility class;
• Add the .position-sticky and the .top-0 utility classes.

<header class="f-header position-sticky top-0 js-f-header">
  <!-- header content here -->
</header>

Expandable on mobile #

By default, on mobile, all the navigation items are visible. If you're building a navigation with lots of items, consider using the variation where the sub items are expandable (see this demo on mobile).

In this variation, the .f-header__dropdown-control replaces the .f-header__link element (as dropdown control).

<ul class="f-header__list">
  <li class="f-header__item">
    <a href="#0" class="f-header__link">About</a>
  </li>

  <li class="f-header__item">
    <button class="reset f-header__dropdown-control js-f-header__dropdown-control">
      <span>Solutions</span>
      <svg class="f-header__dropdown-icon icon" aria-hidden="true" viewBox="0 0 12 12">
        <path d="M9.943,4.269A.5.5,0,0,0,9.5,4h-7a.5.5,0,0,0-.41.787l3.5,5a.5.5,0,0,0,.82,0l3.5-5A.5.5,0,0,0,9.943,4.269Z" />
      </svg>
    </button>

    <ul class="f-header__dropdown">
      <li><a href="#0" class="f-header__dropdown-link">Sub Nav Item One</a></li>
      <!-- ... -->
    </ul>
  </li>
  <!-- ... -->
</ul>

Note: this variation supports a single indentation level. For more complex navigations, check other header components.

Categories

• Navigation > Header

Bug report & feedback

Component Github page ↗