Twitter navbar change its height when the screen is resized

Question

please look this three picture:

1) If all elements fit into navbar everithing is ok

2) If only central elements fit into navbar the height of navabar encrease automatically

3) If the page become more smaller is ok

Code:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 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>
      <a class="navbar-brand" href="Default.aspx">Gestione Azienda</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <!--<li class="active"><a href="#">Link</a></li>-->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Elenco commesse<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a runat="server" href="~/elenco.aspx?societa=1">1</a></li>
            <li><a runat="server" href="~/elenco.aspx?societa=2">2</a></li>
            <li><a runat="server" href="~/elenco.aspx?societa=3">3</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Gestisci commessa<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a runat="server" href="~/1.aspx/#tab-1">1</a></li>
            <li><a runat="server" href="~/2.aspx/#tab-2">2</a></li>
            <li><a runat="server" href="~/3.aspx/#tab-3">3</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Impostazioni<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a runat="server" href="~/impostazioni.aspx">Impostazioni Generali</a></li>
            <li><a runat="server" href="~/GestioneUtenti.aspx">Gestione utenti</a></li>
          </ul>
        </li>
        <li><a id="A1" runat="server" href="~/ProgLavori.aspx" target="_blank">Programmazione lavori</a></li>
        <li><a runat="server" href="http://" target="_blank">Posta</a></li>
        <li><a id="menu_logout" runat="server" onserverclick="logout">Logout</a></li>
        <li><a id="menu_login" runat="server" href="~/Default.aspx">Login</a></li>
      </ul>
    </div>
  </div>
</nav>

Here you can find the code, if you try to resize the menu area you can see my problem.

http://jsfiddle.net/8dabnd41/

Someone could help me??

Answer 1

You can disable the Bootstrap navbar-collapse. There is a great explanation about how to do this here: Bootstrap 3 - disable navbar collapse