<!-- header -->
<header id="header" class="row">
  <div class="col-sm-2"></div>
  <div class="col-sm-8 col-xs-12">
    <img class="band-logo" src="/img/logo-white.png" />
  </div>
  <div class="col-sm-2"></div>
</header>

<!-- nav bar -->
<nav id="nav" class="navbar" class="row">
  <div class="container-fluid">
    <div class="navbar-header">
      <button id="navbar-collapse-button" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <i class="fa fa-bars" aria-hidden="true"></i>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="nav_item">
          <a href="{{ urlFor('home') }}">Home</a>
        </li>
        <li class="nav_item">
          <a href="{{ urlFor('about') }}">About</a>
        </li>
        <li class="nav_item">
          <a href="{{ urlFor('shows') }}">Shows</a>
        </li>
        <li class="nav_item">
          <a href="{{ urlFor('music1') }}">Music #1</a>
        </li>
        <li class="nav_item">
          <a href="{{ urlFor('music2') }}">Music #2</a>
        </li>
        <li class="nav_item">
          <a href="{{ urlFor('contact') }}">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
