Main Header v2

Accessible header component with sub navigations.

Dependencies

• Diagonal Movement
• Animated Menu Button
• Modal Window
• Full-Screen Search

How to

The Main Header v2 component is an accessible, website navigation. It includes different styles of sub level navigations.

Modify the max-width of the header content by editing the .max-width-lg utility class applied to the .container element.

Optionally, you can add data-animation="on" to the <header> element to trigger the sticky animation on bigger screens (the header becomes sticky when the user starts scrolling). If you do so, don't forget to specify the scrolling offset using the data-animation-offset="{offsetValue}" attribute (e.g., data-animation-offset="400").

Categories

• Navigation > Header

Bug report & feedback

Component Github page ↗