🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Flexi Header

Customizable header template.

View Demo


All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

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


Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.