I'm not being able to toggle the navigation menus in my navbar. I've reproduced the problem in fiddle too: <https://jsfiddle.net/9bydt08L/3/>   

I've included necessary js and css also but don't know why its not working for me. Looked up every related questions in stackoverflow and tried everything possible but can't figure out where the error is. Can anyone point out where is the error please?

CSS and HTML:

```css
.navbar{
  background-color: #D9F7F6;
  padding-top: 15px;
  padding-bottom: 15px;
}
body{
  background-color: #E6E7E7;
}

@media (max-width: 768px) {
  .navbar-brand {
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
  }
}
```

```html
<div class="container" id="main">
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <!--COLLAPSE BUTTON FOR NAVBAR MENU-->
      <button class="navbar-toggle" data-target="#menu-collapse" data-toggle="collapse" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="navbar-header">
        <a href="#" class="navbar-brand">PRADIP KHADKA</a>
      </div><!--END NAVBAR HEADER-->
      <div class="nav-collapse navbar-collapse collapse" id="menu-collapse">
        <ul class="nav navbar-nav pull-right" id="navMenu">
          <li class="active"><a href="#">ABOUT</a></li>
          <li><a href="#">PORTFOLIO</a></li>
          <li><a href="#">SOCIAL MEDIA</a></li>
        </ul>
      </div><!--END OF NAVBAR MENUS-->
    </div><!--END OF NAVBAR CONTAINER-->
  </div><!--END OF NAVBAR-->
</div><!--END OF MAIN CONTAINER-->
```