Collapsed Bootstrap Navbar Not Showing

Question

So when collapsed, my navbar menu button works, but after the quick loading animation, the menu dissapears. Not sure why this is happening, I've searched other questions and bootstrap docs, can't figure it out. The website is http://philipeckert.com

HTML:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#brand">Eckert</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#gohereforabout">About</a></li>
        <li><a href="#Portfolio">Portfolio</a></li>
        <li><a href="#Contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS:

.navbar-default {
  background-color: rgb(0, 32, 128);
  border-color: #000000;
}

.navbar-default .navbar-brand {
  color: white;
}

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

.nav.navbar-nav.navbar-right li a {
  color: white;
  font-family: 'Ubuntu', sans-serif;
}

@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Answer 1

Just remove .navbar-collapse.collapse css from your @media query:

/*Remove this */
.navbar-collapse.collapse {
        display: none!important;
}

Here is fiddle demo: https://jsfiddle.net/2pua65co/

Answer 2

remove this css your style.css line no.30

.navbar-collapse.collapse {
    display: none !important;
}

Answer 3

You need to add this CSS Rule for your collapse to function property:

.navbar.navbar-default .collapse.in {
    display: block !important;
}

See Collapse Usage for more info.

Working Example:

 .navbar.navbar-default { background-color: rgb(0, 32, 128); border-color: #000000; } .navbar.navbar-default .navbar-brand { color: white; } .navbar.navbar-default .navbar-toggle .icon-bar { background-color: white; } .navbar.navbar-default .navbar-nav.navbar-right li a { color: white; font-family: 'Ubuntu', sans-serif; } @media (max-width: 990px) { .navbar.navbar-default .navbar-header { float: none; } .navbar.navbar-default .navbar-left, .navbar.navbar-default .navbar-right { float: none !important; } .navbar.navbar-default .navbar-toggle { display: block; } .navbar.navbar-default .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .navbar.navbar-default.navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar.navbar-default .navbar-collapse { overflow: hidden; } .navbar.navbar-default .navbar-collapse.collapse { display: none!important; } .navbar.navbar-default .navbar-nav { float: none!important; margin-top: 7.5px; } .navbar.navbar-default .navbar-nav > li { float: none; } .navbar.navbar-default .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; } .navbar.navbar-default .collapse.in { display: block !important; } .navbar.navbar-default .navbar-nav .dropdown-menu > li > a, .navbar.navbar-default .navbar-nav .dropdown-menu > li > a:hover, .navbar.navbar-default .navbar-nav .dropdown-menu > li > a:focus { color: #777; } } 

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <nav class="navbar navbar-default navbar-fixed-top navbar"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#brand">Eckert</a> </div> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#gohereforabout">About</a> </li> <li><a href="#Portfolio">Portfolio</a> </li> <li><a href="#Contact">Contact</a> </li> </ul> </div> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>