<header>

<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
  <!-- <i class="fa fa-globe-asia fa-2x" aria-hidden="false"></i> -->
  <!-- change this to your icon -->
  <img width="50px" src="assets/icons/jekylleaf.png"/>
  <br>
  <a class="navbar-brand" href="#"> {{ site.title }} </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item" role="presentation">
        <a href="" role="button" class="nav-link active" data-toggle="modal" data-target="#aboutModal">&nbsp;About&nbsp;<i class="fas fa-question-circle"></i></a>
      </li>
      <li class="nav-item" role="presentation">
        <a href="" role="button" class="nav-link active" data-toggle="modal" data-target="#aboutLegends">&nbsp;Map Legends&nbsp;<i class="fas fa-map"></i></a>
      </li>
      <li class="nav-item" role="presentation">
        <a href="" role="button" class="nav-link active" data-toggle="modal" data-target="#contactModal">&nbsp;Contact&nbsp;<i class="fas fa-paper-plane"></i></a>
      </li>
    </ul>
  </div>
</nav>

</header>