<header id="luxbar" class="luxbar-fixed">
    <input type="checkbox" class="luxbar-checkbox" id="luxbar-checkbox"/>
    <div class="luxbar-menu luxbar-menu-right luxbar-menu-dark">
        <ul class="luxbar-navigation">
            <li class="luxbar-header">
                <a href="/" class="luxbar-brand">{{site-title}}</a>
                <label class="luxbar-hamburger luxbar-hamburger-doublespin" 
                id="luxbar-hamburger" for="luxbar-checkbox"> <span></span> </label>
            </li>
            <li class="luxbar-item"><a href="/news"><i class="fa fa-bullhorn"></i> News</a></li>
            <li class="luxbar-item"><a href="/getting-started"><i class="fa fa-star"></i> Getting Started</a></li>
            <li class="luxbar-item"><a href="/usage"><i class="fa fa-wrench"></i> Usage</a></li>
            <li class="luxbar-item"><a href="/customization"><i class="fa fa-cogs"></i> Customization</a></li>
            <li class="luxbar-item"><a href="/reference"><i class="fa fa-book"></i> Reference</a></li>
            <li class="luxbar-item"><a href="/about"><i class="fa fa-info-circle"></i> About</a></li>
        </ul>
    </div>
</header>