Bootstrap 3 navbar not fully collapsing

Question

I'm using Bootstrap 3, and I have some issues with the collapsable navbar. The problem is it's collapsing showing all the menu items, then it resizes automatically and only shows the first menu item it seems.

HTML is as follows:

  <nav class="navbar navbar-custom" role="navigation">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
        <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>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#"><i class="fa fa-home"></i></a></li>
        <li class="politics"><a href="#">Politica</a></li>
        <li class="headerDivider"></li>
        <li class="society"><a href="#">Societate</a></li>
        <li class="economics"><a href="#">Economie</a></li>
        <li class="external"><a href="#">Extern</a></li>
        <li class="life-style"><a href="#">Stil de viata</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>

And the CSS for the navbar:

    .navbar-custom {
        background-color:#303334;
        color:#ffffff;
        border-radius:0;
        margin-bottom: 0;
        border: none;
        margin: 0;
    }

    .navbar-custom .navbar-nav > li > a {
        color:#fff;
        padding-left:20px;
        padding-right:20px;
    }

    .navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
        color: #ffffff;
        background-color:transparent;
    }

    .navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus {
        text-decoration: none;
        background-color: #007faa;
    }

    /** Custom Hover Colors **/

    .navbar-custom .navbar-nav > li.politics > a:hover, .nav > li > a:focus {
        text-decoration: none;
        background-color: #a70500;
        transition: background .15s ease-in-out;
       -moz-transition: background .15s ease-in-out;
       -webkit-transition: background .15s ease-in-out;
    }
    .navbar-custom .navbar-nav > li.society > a:hover, .nav > li > a:focus {
        text-decoration: none;
        background-color: #781b92;
        transition: background .15s ease-in-out;
       -moz-transition: background .15s ease-in-out;
       -webkit-transition: background .15s ease-in-out;
    }
    .navbar-custom .navbar-nav > li.economics > a:hover, .nav > li > a:focus {
        text-decoration: none;
        background-color: #24af5f;
        transition: background .15s ease-in-out;
       -moz-transition: background .15s ease-in-out;
       -webkit-transition: background .15s ease-in-out;
    }
    .navbar-custom .navbar-nav > li.external > a:hover, .nav > li > a:focus {
        text-decoration: none;
        background-color: #fe9d01;
        transition: background .15s ease-in-out;
       -moz-transition: background .15s ease-in-out;
       -webkit-transition: background .15s ease-in-out;
    }
    .navbar-custom .navbar-nav > li.external > a:hover, .nav > li > a:focus {
        text-decoration: none;
        background-color: #fe9d01;
        transition: background .15s ease-in-out;
       -moz-transition: background .15s ease-in-out;
       -webkit-transition: background .15s ease-in-out;
    }
    .navbar-custom .navbar-nav > li.life-style > a:hover, .nav > li > a:focus {
        text-decoration: none;
        background-color: #cd3ac1;
        transition: background .15s ease-in-out;
       -moz-transition: background .15s ease-in-out;
       -webkit-transition: background .15s ease-in-out;
    }

    .navbar-custom .navbar-nav > li.politics-active > a {
        color:#fff;
        background: #a70500;
        padding-left:20px;
        padding-right:20px;
    }

    .navbar-custom .navbar-nav > li.society-active > a {
        color:#fff;
        background: #781b92;
        padding-left:20px;
        padding-right:20px;
    }

    .navbar-custom .navbar-nav > li.economics-active > a {
        color:#fff;
        background: #24af5f;
        padding-left:20px;
        padding-right:20px;
    }

    .navbar-custom .navbar-nav > li.external-active > a {
        color:#fff;
        background: #fe9d01;
        padding-left:20px;
        padding-right:20px;
    }

    .navbar-custom .navbar-nav > li.life-style-active > a {
        color:#fff;
        background: #cd3ac1;
        padding-left:20px;
        padding-right:20px;
    }

    .navbar-collapse.in {
        overflow-y: auto;
        height: 251px;
    }

    /** End hover colors **/

    .navbar-custom .navbar-brand {
        color:#eeeeee;
    }

    .navbar-custom .navbar-toggle {
        background-color:#eeeeee;
    }

    .navbar-custom .icon-bar {
        background-color:#007faa;
    }

    .navbar-nav {
        font: 400 1.3em 'Oswald', 'Arial Narrow', Arial, sans-serif;    
        text-transform: uppercase;
        height: 30px;

    }

    .fa-home {
        font-size: 1.2em;
    }

    .navbar-nav > li {
        padding-right: 25px;
        margin: 0;
    }

Bootply

Answer 1

Your problem is in your CSS:

Comment the height attribute in

.navbar-nav {
    font: 400 1.3em 'Oswald', 'Arial Narrow', Arial, sans-serif;    
    text-transform: uppercase;
 //   height: 30px;

}

Bootply : http://www.bootply.com/124660

Answer 2

It's because of the height property in this line:

.navbar-nav {
    font: 400 1.3em 'Oswald', 'Arial Narrow', Arial, sans-serif;    
    text-transform: uppercase;
    height: 30px; /* <-- remove this one */

}