3

I have a simple navbar with 3 textual links, a search bar and a dropdown with more links, as seen in the jsfiddle here

http://jsfiddle.net/guyisra/DByTm/1/

full window fiddle (resize window until 2 rows)

<div class="navbar navbar-fixed-top "> <div class="navbar-inner " style="padding:3px;"> <div class="container navbar_container" style=" margin-left: 50px; "> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="/" style=" padding: 0; width: 185px; "> LOGO <div class="sprite-logos "></div> </a> <div class="nav-collapse collapse "> <ul class="nav"> <li id="loading-indicator" style="margin-top: 8px; visibility: hidden;"> <div></div> </li> <li class="divider-vertical"></li> <li class="nav_option"><a href="/Link1"><i class="icon-envelope"> </i> Link num 1 </a> </li> <li class="nav_option"><a href="/Link2"><i class="icon-envelope"> </i> Link num 2</a> </li> <li><a href="/Link3"><i class="icon-envelope"> </i> Link num 3</a> </li> <li class="divider-vertical"></li> <form accept-charset="UTF-8" action="/home" class="navbar-search pull-left" method="get"> <div style="margin:0;padding:0;display:inline"> <input name="utf8" type="hidden" value="✓"> </div> <span class="icon-search" style="position:relative;vertical-align: middle;left:27px;"></span> <input class="input-medium search-query" id="q" name="q" placeholder="Search" required="required" style="padding-left:29px" type="text"> </form> </ul> <ul class="nav pull-right"> <li> <div> <a href="/red" class="btn btn-danger">RED</a> </div> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Jimmy bob <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="/Link"><i class="icon-envelope"> </i> Link</a> </li> <li><a href="/Link"><i class="icon-envelope"> </i> Link</a> </li> <li><a href="/Link"><i class="icon-envelope"> </i> Link</a> </li> <li class="divider"></li> <li> <a href="/Link"><i class="icon-envelope"> </i> Link</a> </li> <li class="divider"></li> <li> <a href="Link" data-method="delete" rel="nofollow"><i class="icon-envelope"> </i> Link</a> </li> </ul> </li> </ul> </div> </div> </div> <span class="sprite_loader"></span> </div>

when resizing, one of the sizes causing the nabvar to shift and make 2 rows, as in the picture below

enter image description here

I can't shorten Link1,2,3 name, and the user's name could be longer.

I'd like the navbar to always be 1 row, and that if the user name (or the pull-right part) is too long to push the search form to be shorter

Is there a way to do this?

Improve this question

3 Answers 3

Reset to default
4

Using row in a container is the best practice while using Twitter Bootstrap

<div class="container"> <div class="row"> // your content </div> </div>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Good suggestion. twitter.github.io/bootstrap/examples/hero.html don't use it for the navbar.
@BassJobsen Yes interestingly they don't use in the documentation too. This is just a real-life experiment.
0

In your case / example add a span2 class to your search input field: see http://jsfiddle.net/bassjobsen/s9Mcp/1/

<input class="span2 input-medium search-query" id="q" name="q" placeholder="Search" required="required" style="padding-left:29px" type="text">
Improve this answer

Comments

0

For me, the issue seemed to be that I just had too much stuff in the nav bar. Lots of buttons, search form, logo, etc, made it much larger than ~940px, so it folded to two rows before reaching the trigger width (940px) for collapsing. Not sure if there is a way to accommodate this, but I decided to just remove some buttons, shorten some text, etc, and that got me past it.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.