nav.html

    <nav class="navbar navbar-default navbar-fixed-top main-navbar"> <!--creates navbar-->
            <div class="navbar-header"> <!--creates the navbar header-->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span><!--used for screen readers for accessibility-->
                    <span class="glyphicon glyphicon-menu-hamburger"></span>
                    <span class="menu">Menu</span>
                </button> <!--hamburger button for smaller devices-->
                <a class="navbar-brand" href="#">Programming Resilience</a><!--our website brand name-->
            </div>
            <h5 class="navbar-text"><font color="#cccccc">Exploring Land Loss</font></h5>
                <div class="collapse navbar-collapse" id="nav1">
     
                  <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Stories<span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        <li><a href="index.html">Exploring Land Loss</a></li>
                        <li><a href="texaco/index.html">Texaco Canals</a></li>
                      </ul>
                    </li>

                  </ul>
                </div><!-- /.navbar-collapse -->

    </nav><!--end navigation bar-->