blog/_src/_includes/header.html

<header role="banner" class="site__header">
    <div class="header__content">
        <div class="container">

            <div class="grid grid--half">

                <div class="grid__col">
                    <h1 class="header__title">
                        <a class="header__logo" href="/">kremalicious</a>
                    </h1>
                </div>

                <nav role="navigation" class="nav-main grid__col">
                    <button type="button" class="menu-btn" data-toggle="tooltip" title="Menu">
                        <svg class="icon icon-entypo icon-entypo-menu" role="img" aria-labelledby="title">
                            <title id="title">Menu</title>
                            <use xlink:href="/assets/img/sprite.svg#entypo-menu"></use>
                        </svg>
                    </button>
                </nav>

                <section class="site-search">
                    <button type="button" class="search-btn" data-toggle="tooltip" title="Search">
                        <svg class="icon icon-entypo icon-entypo-search" role="img" aria-labelledby="title">
                            <title id="title">Search</title>
                            <use xlink:href="/assets/img/sprite.svg#entypo-magnifying-glass"></use>
                        </svg>
                    </button>
                    <div class="search-area">
                        <input type="search" id="search-input" class="form-control input-search search-field" placeholder="Search everything">
                        <button class="close search-close">&times;</button>
                    </div>
                </section>

            </div>

            <ul class="nav-popover grid grid--half grid-medium--third">
                {% for category in site.categories %}
                    <li class="grid__col">
                        <a class="nav-link" href="/{{ category | first }}/">
                            {{ category | first }}
                        </a>
                    </li>
                {% endfor %}
            </ul>

        </div>
    </div>
</header>

<div id="search-popover" class="search-popover hide">
    <div class="container">
        <ul id="search-results" class="search-results grid grid--gutters grid--full grid-medium--half"></ul>
    </div>
</div>