Question

I am using the bootstrap responsive navbar to collapse links in the navbar when the screen is smaller. I want to keep a button and a search box out of the collapsed area though. This is my code:

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">                    
                <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="/">site name</a>

                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Other</a></li>    
                    </ul>
                </div>

                <form action="#" class="navbar-search pull-left">
                    <input name="search" class = "search-query" />
                </form>

                <div class="btn-group pull-right">
                    <button class="btn btn-primary">Log In</button>
                </div>
            </div>
        </div>      
    </div>

This looks fine when on a normal screen but once the links collapse, the button and search box are forced below, doubling the height of the nav.

If I move the search box to the left of the nav-collapse links, it works ok but I need the links to show up first.

Any ideas how to achieve this?

Answer 1

Hard to tell without testing, but you could try adding a white-space: nowrap style to the container.

<div class="container-fluid nowrap">

CSS:

.nowrap { white-space: nowrap; }

EDIT:
Did some testing, I believe this emulates the behavior you’re looking for:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">                    
            <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="/">site name</a>

           <div class="btn-group pull-right">
                <button class="btn btn-primary">Log In</button>
            </div>
            <div class="pull-left">
           <form action="#" class="navbar-search pull-right">
                <input name="search" class = "search-query" />
            </form>

            <div class="nav-collapse pull-right">
                <ul class="nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Other</a></li>    
                </ul>
            </div>
            </div>
        </div>
    </div>      
</div>

CSS:

@media (max-width: 979px) {
    .navbar .btn-navbar { float: left !important; }
    .navbar-search { float: left; }
}

Basically, just float the links and search bar to the right and wrap them in a div that floats left (to mimic the current behavior on screen widths > 979px).
Then, float the links and search bar to the left when the window is shrunk to avoid the linebreak.

It will still break on very small screen widths, simply because the search bar is too wide to fit with the rest of the content. You can prevent this by overriding its width accordingly.
For example:

.search-query { width: 150px !important }