Bootstrap 3 RC2 custom navbar fixed top goes in two lines

Question

I am using Bootstrap 3 RC2 and I am trying to make a navigation bar on top, but without full width. I copied the "navbar-fixed-top" declarations in css and created mine. In IE (10), this works well, but in Chrome (28) the panel jumps to two lines.

Did I miss something so that the contents of the navigator are always on the same line?

Thanks.

Download: http://bootply.com/74981

CSS:

.navbar-custom { border-width: 0 0 1px; position: fixed; top: 0; right: 100px; z-index: 1030; } .navbar-custom .navbar-form { padding-right: 0; } .navbar-custom { border-radius: 0; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } 

html:

 <nav class="navbar navbar-inverse navbar-custom" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-target=".navbar-ex1-collapse" data-toggle="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 title="Accueil" class="navbar-brand" href="/"> Flammy </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li><a href="#">News</a></li> <li><a href="#">Events</a></li> <li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Games <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Game 1</a></li> <li><a href="#">Game 2</a></li> <li><a href="#">Game 3</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Projects <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Big project 1</a></li> <li><a href="#">Big project 2</a></li> <li><a href="#">Big project 3</a></li> </ul> </li> <li><a href="#">Forums</a></li> </ul> <form class="navbar-form navbar-right" action="/Account/Logout" method="post"> <div class="btn-group"> <a class="btn btn-default" href="#">Register</a> <a class="btn btn-default" href="#">Login</a> <div class="btn-group"> <button title="Language" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> <i class="glyphicon glyphicon-flag"></i> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Language</a></li> <li><a href="#">Language</a></li> <li><a href="#">Language</a></li> </ul> </div> </div> </form> </div> <!-- /.navbar-collapse --> </nav> 

Answer 1

The problem is the Bootstrap floating layout methods and that you don’t have the explicit width set for your navigator, so you can try setting min-width that fits all your content or add this fix to your CSS:

 .navbar-custom .navbar-collapse { float:left; } 

Updated bootply http://bootply.com/74987#