Ahnita/navbar.css

## navbar.css
/* Nav Bar */
nav li ul {
	float: right;
	width: 100%;
	position: fixed;
	letter-spacing: 0.05em;
	font-family: 'Josefin Sans', serif;
	color: #FAFFFF;
	z-index: 6;
	display: inline-block;
	padding: 20px 10px 20px;
}

.projectname a img {
	float: none;
	padding: 5px;
	position: fixed;
	z-index: 6;
}

li a {
	transition: color 600ms;
	font: 20px 'josefin sans', serif;
}

ul.nav a:hover {
	color: #D42163 !important;
}

nav {
	float: right;
	z-index: 6;
}


## navbar.html
<body data-spy = "scroll" data-target=".navbar">
  <body class="flex-center-wrapper flex-column">
    <!-- navbar starts here -->
          <nav class = "navbar navbar-inverse navbar-fixed-top" role="navigation">
          <div class = "projectname">
              <a href ="#"><img src="img/logo_ahnita.png" class="img.responsive" alt="Ahn Bustamante">
              </a>
          </div> <!-- end of projectName -->
          <nav class="container-fluid">
            <nav class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr only"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              </button>

            <div class = "navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li><a href= "#about">About</a></li>
                <li><a href= "#projects">Projects</a></li>
                <li><a href="#FAQ">FAQ</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div> <!-- end of navbar-collapse collapse -->
          </nav> <!-- End of navbar-header -->
        </nav> <!-- end f nav container -->

      </nav>  <!-- end of navbar -->

## navbar.js
$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
        $(this).collapse('hide');
    }
});
	/* Nav Bar */
	nav li ul {
	float: right;
	width: 100%;
	position: fixed;
	letter-spacing: 0.05em;
	font-family: 'Josefin Sans', serif;
	color: #FAFFFF;
	z-index: 6;
	display: inline-block;
	padding: 20px 10px 20px;
	}

	.projectname a img {
	float: none;
	padding: 5px;
	position: fixed;
	z-index: 6;
	}

	li a {
	transition: color 600ms;
	font: 20px 'josefin sans', serif;
	}

	ul.nav a:hover {
	color: #D42163 !important;
	}

	nav {
	float: right;
	z-index: 6;
	}
	<body data-spy = "scroll" data-target=".navbar">
	<body class="flex-center-wrapper flex-column">
	<!-- navbar starts here -->
	<nav class = "navbar navbar-inverse navbar-fixed-top" role="navigation">
	<div class = "projectname">
	<a href ="#"><img src="img/logo_ahnita.png" class="img.responsive" alt="Ahn Bustamante">
	</a>
	</div> <!-- end of projectName -->
	<nav class="container-fluid">
	<nav class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	<span class="sr only"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>

	<div class = "navbar-collapse collapse">
	<ul class="nav navbar-nav">
	<li><a href= "#about">About</a></li>
	<li><a href= "#projects">Projects</a></li>
	<li><a href="#FAQ">FAQ</a></li>
	<li><a href="#contact">Contact</a></li>
	</ul>
	</div> <!-- end of navbar-collapse collapse -->
	</nav> <!-- End of navbar-header -->
	</nav> <!-- end f nav container -->

	</nav> <!-- end of navbar -->
	$(document).on('click','.navbar-collapse.in',function(e) {
	if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
	$(this).collapse('hide');
	}
	});