<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"> About <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"> Map Legends <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"> Contact <i class="fas fa-paper-plane"></i></a> </li> </ul> </div> </nav>
</header>