CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →


Progress value is 30%

Flexi Header

Customizable header template.

Copy: View demo


All components are built upon the CodyHouse Framework.

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

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

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; 


  • ✅ Component created
    🗓 September 06, 2019

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

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