Cacher is the code snippet organizer for pro developers

@include at-query($min, $medium) {
  .site-nav {
    text-align: center;
  }   
}

<header class="site-header" role="banner">
  <div class="wrapper">

    <div class="grid--full large--display-table">
      <div class="grid__item large--display-table-cell">
        {% if template == 'index' %}
          <h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
        {% else %}
          <div class="h1 site-header__logo" itemscope itemtype="http://schema.org/Organization">
        {% endif %}
          {% if settings.logo_use_image %}
            <a href="/" itemprop="url">
              <img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
            </a>
          {% else %}
            <a href="/" itemprop="url">{{ shop.name }}</a>
          {% endif %}
        {% if template == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}
        {% if settings.header_message != blank %}
          <p class="header-message large--hide">
            <small>{{ settings.header_message }}</small>
          </p>
        {% endif %}
      </div>
    </div>
    
    <div class="grid--full large--display-table">
      <div class="grid__item large--display-table-cell medium-down--hide">
        {% include 'site-nav' %}
      </div>
    </div>

  </div>
</header>