The header is a part of the default template. Using Firecode it is possible to create your own header, or remove it completely.

It is possible for users to choose their own header in Appearance. There are two headers built into Snowfire by default.

You can think of these two options as two different files. If you create a new header in Firecode you'll copy one of these and make your own.

When you have created a new header in Firecode that will be used by all templates. This is defined by settings.json.

If you remove these lines the system will use the default header. It is also possible to create another header if you want to try different header concepts.

Styling the header

The default headers are called echo-header-1 and echo-header-2. All default styles are namespaced and starts with .echo-header-X.

When creating new classes, don't use the name echo or sf. That will make sure it doesn't conflict with any official styles.

Add all styles for the header in your style.scss file.

The logo

Users might upload their own logo in Appearance. To show the logo you can use the logo function in header.tpl

This will output the logo with a link tag and img tag. It is retina optimized by default, and users are able to change size in Appearance.

Built in sizes

  • small – 140x60
  • medium – 210x70
  • large – 340x90

Provide height/width if you want to define a custom size.


The navigation menu in Snowfire is built with com_menu.

{ com_menu (
    id: '100',
    description: 'Menu',
    syncId: '100',
    childrenLevels: '1',
    activeClass: 'custom-menu-active',
    hasChildrenClass: 'custom-menu-child',
    itemHtml: '<li %class%><a href="%link%">%name%</a></li>',
    childItemHtml: '<li %class%><a href="%link%">%name%</a></li>'
) }

The code above outputs the following HTML

     <li class="custom-menu-active custom-menu-active-root">
          <a href="/">Home</span></a>
          <a href="/about-us">About us</span></a>

The class custom-menu-active is added to the current page. If you have a multi level menu the class custom-menu-active-root will only be added to the first menu level.


  • id – This must be an integer between 100-199 to not collide with other IDs in the footer or custom templates.
  • description – A text visible when there are no menu items
  • syncId – Keeps the menu in sync on all subpages. Use the same integer as the id.
  • childrenLevels – How many sub levels there we should render. We support 0 or 1 sub level.
  • activeClass – Described above
  • hasChildrenClass – A class added to the <li> when there is sub levels.
  • itemHtml – Customize the HTML used for all menu items in the menu.
  • childItemHtml – Customize the HTML used for all sub menu items
  • htmlElement – Defines the wrapper element of the menu. Defaults to <ul>

A note about the default header

The default header (menu with dropdown) is using two different menus. One which is visible on desktops, and another one on smaller screens.

Using two different parts of the DOM to render each menu makes the CSS simpler for each menu. If you look at the code for these you'll see we use id="100" for the first menu and id="101" for the second menu. Since both menus is referencing the same menu we use the same syncId.