The header is a customizable component within Snowfire's default template. Users can select from built-in options or create custom headers through Firecode, with configuration managed via settings.json.

Two pre-built headers are available:

All default styling uses the .echo-header-X namespace.

When adding custom header styles to style.scss, avoid using class names prefixed with "echo" or "sf" to prevent conflicts with official styles.

The logo function in header.tpl displays user-uploaded logos with retina optimization.

Custom dimensions can be specified via height/width parameters.

Navigation uses the com_menu component with configurable parameters.

Active menu items receive the specified active class, with root-level items also receiving an -root suffix variant.

The standard header employs two separate menu instances (id="100" and id="101") rendered in different DOM areas - one for desktop, one for mobile - sharing the same syncId for synchronization.