3

My Navbar links collapse into a second row when I minimize or pan to a smaller screen (using Twitter Bootstrap 3):

enter image description here

Navbar HTML:

<div class=" navbar navbar-default navbar-fixed-top " role="navigation">
  <nav 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="#midnav">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
     </button>
        </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="midnav">
     <ul class="nav navbar-nav">
       <li><a href="/">Link</a></li>
        <li><a href="/">Link</a></li>
         <li><a href="/">Link</a></li>
           <li>Link</li>
            <li>Link</li>
       </ul>
   </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
 </nav>
</div>

What can I do to prevent this?

I've played around with Max-height on #midnav (which does have a margin-left to it with an attempt to center the links in full screen mode)

CSS:

#midnav {
 margin-left:295px;
 max-height:53px;
       }
TarDavis
  • 117
  • 1
  • 3
  • 12
  • Here's a fiddle. See if you can set it up to replicate the problem, then add the updated fiddle to your question. http://jsfiddle.net/isherwood/RE6KL/ – isherwood Mar 07 '14 at 22:25
  • you need to transform it in a mobile-menu and hide this. look for it in bootstrap docs – user3173819 Mar 07 '14 at 22:29

0 Answers0