Customizable header template.
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. All variations share the same SCSS/JS code. They only differ in their HTML.
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
To modify the logo, make sure to update the content of
.f-header__logo in both the
.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:
If you want the header to be fixed, from the
- 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 -->