nav.html

<nav class="navbar navbar-toggleable-md navbar-inverse  bg-inverse  z-index10 h-100" role="navigation">
  <div class=" ">
    <a class="nav-link page-scroll logo" href="#sliderContainer" class="navbar-left"><img src="images/cocktail_icon.png" style="width:128px; height:128px;filter: invert(100%);
      " class="img-center clearfix"></a>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand page-scroll" href="#sliderContainer">C O C K T A I L S</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="flex-column collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="navbar-nav flex-column" id="navbarscroll">

        <li class="nav-item">
          <a class="nav-link page-scroll" href="#popularContainer" class="page-scroll">Popular</a>
        </li>

        <li id="welcome_msg_anchor" class="nav-item">
          <a class="nav-link page-scroll" href="#contactsContainer" class="page-scroll">Contacts</a>
        </li>

      </ul>
      <ul class="navbar-nav pull-left pull-right-md flex-column">
        <li class="nav-item">
          <a id="btn-nav-login" class="nav-link btn-md" href="#" role="button" data-toggle="modal" data-target="#login-modal"><span class="glyphicon glyphicon-user"></span> Log In</a>
        </li>
        <li class="nav-item">
          <a id="btn-nav-logout" class="nav-link btn-md hidden" href="#" role="button"><span class="glyphicon glyphicon-user"></span> Log out</a>
        </li>
      </ul>
      <ul class="navbar-nav pull-left pull-right-md flex-column">
        <li class="nav-item">
          <div class="row search">
            <form action="" id="searchForm" autocomplete="off">
              <div class="row">
                <div class="col-sm-12">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for Cocktail Here ...." id="searchBar">

                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <span class="input-group-btn">
                    <button class="btn btn-primary"  type="submit" id="searchButton" > <a href="href="#searchContainer"">Go!</a></button>
                  </span>
                </div>
              </div>
            </form>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>