<div class="title-bar hide-for-medium" data-responsive-toggle="menu">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">{{ site.title }}</div>
</div>

<div class="top-bar" id="menu">
    <div class="top-bar-left show-for-medium">
        <ul class="menu">
            <li class="menu-text">{{ site.title }}</li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="menu vertical medium-horizontal">
            {% for page in site.pages %}{% if page.title %}
            <li><a href="{{ page.url }}">{{ page.title }}</a></li>
            {% endif %}{% endfor %}
        </ul>
    </div>
</div>

<div class="title-bar hide-for-medium" data-responsive-toggle="menu">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">{{ site.title }}</div>
</div>

<div class="top-bar" id="menu">
    <div class="top-bar-left show-for-medium">
        <ul class="menu">
            <li class="menu-text">{{ site.title }}</li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="menu vertical medium-horizontal small-collapse">
            {% for page in site.pages %}{% if page.title %}
            <li><a href="{{ page.url }}">{{ page.title }}</a></li>
            {% endif %}{% endfor %}
        </ul>
    </div>
</div>

Add small-collapse to prevent brief display on small
Add small-collapse to prevent brief display on small
