<div data-theme="bristol">

    <header class="masthead" role="banner">
        <div class="masthead__inner">
            <a class="masthead__branding" href="/">
                <img class="masthead__logo" src="../../images/logo.svg" alt="Severn Bronies">
            </a>
            <div class="masthead__nav-toggle">
                <a class="masthead__nav-toggle__link" href="#bottom">
                    <span class="masthead__nav-toggle__label">Menu</span>
                </a>
            </div>
            <nav class="navigation masthead__nav" role="navigation">
                <div class="navigation__inner">
                    <nav class="navigation" role="navigation">
                        <div class="navigation__inner">
                            <ul class="navigation__list">
                                <li class="navigation__item">
                                    <a class="navigation__link" href="/meets">
                                        Meets
                                    </a>
                                </li>
                                <li class="navigation__item">
                                    <a class="navigation__link" href="/about">
                                        About
                                    </a>
                                </li>
                                <li class="navigation__item">
                                    <a class="navigation__link" href="/rules">
                                        Rules
                                    </a>
                                </li>
                                <li class="navigation__item">
                                    <a class="navigation__link" href="http://blog.severnbronies.co.uk/">
                                        Blog
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </nav>
        </div>
    </header>

</div>
<div data-theme="bristol">

    <header class="masthead" role="banner">
        <div class="masthead__inner">
            <a class="masthead__branding" href="/">
                <img class="masthead__logo" src="{{ path '/images/logo.svg' }}" alt="Severn Bronies">
            </a>
            <div class="masthead__nav-toggle">
                <a class="masthead__nav-toggle__link" href="#bottom">
                    <span class="masthead__nav-toggle__label">Menu</span>
                </a>
            </div>
            <nav class="navigation masthead__nav" role="navigation">
                <div class="navigation__inner">
                    {{> @navigation }}
                </div>
            </nav>
        </div>
    </header>

</div>
{
  "themes": [
    "severn",
    "bristol",
    "cardiff",
    "newport",
    "weston-super-mare"
  ],
  "navigationItems": {
    "Meets": "/meets",
    "About": "/about",
    "Rules": "/rules",
    "Blog": "http://blog.severnbronies.co.uk/"
  }
}

The background colour of the masthead depends on the global data-theme setting.