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>