Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by Bhavik Bamania

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top" id="section1">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
        <span class="icon-bar"></span> <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a>
    </div>
    <div class="overlay">

    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#section1">Home</a>
        </li>
        <li>
          <a href="#section2">About Me</a>
        </li>
        <li>
          <a href="#section3">Game</a>
        </li>
        <li>
          <a href="#section4">Me</a>
        </li>
        <li>
          <a href="#section5">Hobbies</a>
        </li>
        <li>
          <a href="#section6">Contact Me</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="modal fade" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-nav-content">
      <div class="modal-nav-body">
        <ul>
          <li>Brand</li>
          <li>About Me</li>
          <li>Game</li>
          <li>Hobbies</li>
          <li>Contact Me</li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS

body {
  background-color: Black;
}

.navbar-default {
  background-color: transparent;
  border-top: 0px solid rgba(0, 0, 0, 0.5);
  border-bottom: 0px solid rgba(0, 0, 0, 0.5);
  border-left: 0px solid rgba(0, 0, 0, 0.5);
  border-right: 0px solid rgba(0, 0, 0, 0.5);
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
  padding-top: 9px;
  padding-bottom: 26px;
}

.navbar.navbar-default .navbar-collapse {
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.navbar-nav>li {
  border-right: 1px solid white;
  padding-left: 14px;
  padding-right: 14px;
  height: 32px;
}

.navbar-nav {
  padding-top: 20px;
}

.navbar-nav>li:last-child {
  border: none;
}

.navbar-default .navbar-toggle {
  border-color: rgba(0, 0, 0, 0);
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar-toggle {
  margin-top: 19px;
  margin-right: 43px;
}

.navbar-default .navbar-nav>li>a {
  color: white;
  font-size: 15px;
  line-height: 1px;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #fff;
  background-color: rgba(255, 198, 0, 0);
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}

.navbar-default .navbar-nav>li>a {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}

.navbar-default .navbar-nav>li>a:after {
  content: '';
  display: block;
  margin: auto;
  height: 1px;
  width: 0px;
  background: transparent;
  transition: width .4s ease, background-color .4s ease;
  margin-top: 12px;
}

.navbar-default .navbar-nav>li>a:hover:after {
  width: 100%;
  background: #FFC600;
}

.navbar-default...

JavaScript

$(".navbar-toggle").on("click", function() {

  $(".overlay").fadeIn("slow")

})
$(".overlay").on("click", function() {

  $(this).fadeOut();
  $(".navbar-collapse").removeClass("in").addClass("collapse")
})