Small Tabs › Style Guide

Site Header

The site header is consistent across all pages. It is responsible for displaying the Small Tabs brand, and a minimal amount of primary navigation. At smaller viewports, the navigation is collapsed into a "menu" icon.

<header class="site-header">
  <div class="container">
    <div class="l-1up">
      <div class="site-header-logo">
        <h1 class="element-invisible">Small Tabs Chicago</h1>
        <img src="/smalltabs/assets/img/smalltabs-logo__header.svg" />
      </div>
      <nav class="site-header-navigation">
        <a class="site-header-navigation__link" href="#">Bar Specials</a>
        <a class="site-header-navigation__link" href="#">Neighborhoods</a>
        <a class="site-header-navigation__link" href="#">Promote Your Bar</a>
        <a class="site-header-navigation__button" href="#">Sign In</a>
      </nav>
      <nav class="site-header-navigation--mobile">
        <a class="site-header-navigation__link-icon"><i class="ss-icon ss-standard">rows</i></a>
      </nav>  
    </div>
  </div>
</header>