Bootstrap collapsed navbar disappears

Question

When I click on the toggle on my mobile page, the menu pops up for a brief moment and disappears again. Only the first item remains visible.

I took the css from thebootstrapthemes and basically just changed the colors and the content of the menu.

<div class="navbar-wrapper">
  <div class="container">
    <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="top-nav">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#home"><img src="#"></a>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse  collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="scroll"><a href="#home">Home</a></li>
            <li><a href="/pronunciation.html">Pronunciation</a></li>
            <li><a href="/downloads.html">Downloads</a></li>
            <li><a href="/blog/">Blog</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Any advice, how I can get my menu back?

This is my site

Answer 1

.navbar-nav {
    margin-right: 0px !important;
    height: 51px;
}

The 51px height is limiting your collapsible nav to show entirely.

** Not related to your question **

When using Bootstrap don't use row outside a container div since it will cause unnecessary horizontal scrollbars to appear.

Check your HTML for this element: #home #banner .centered .row . It's showing a scrollbar on my browser.