CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
AlwaysQuestioning
AlwaysQuestioning

Reputation: 1484

How can I keep navbar columns on the same line on window resize?

I want for nothing on my navbar to fall to the second row on the window getting smaller.

My navbar currently contains:

  1. Brand image
  2. Search form
  3. Additional button

Currently, the additional button on the far right of the navbar drops to the second row when the window shrinks no matter what I do.

How can I prevent the button on the far right of the navbar from dropping to a different row on window resize?

   <nav class="nav" id="navigationBar" style="">
      <div class="row">
         <div class="col-sm-1">
            <a class="navbar-brand" href="/""><img src="mylogo.png" class="logo-small"></a>
         </div>

         <div class="col-sm-10">
            <form>
               <div class="input-group" id="searchBar">
                  <input type="text" class="form-control" id="searchInputText" placeholder="Search here." onsubmit="search()">
                  <span class="input-group-btn">
                   <button type="button" id="searchButton"><i class="flaticon-search"></i></button>
                </span>
             </div>
          </form>
       </div>
       <div class="col-sm-1">
            <button type="button"><i class="flaticon-search"></i></button>
      </div>

   </div>
   
</nav>

Upvotes: 1

Views: 459

Answers (2)

FluffyKitten
FluffyKitten

Reputation: 14312

That is actually the correct behaviour for the code you have.

The problem is that col-sm-xx only creates the column for screen sizes above 768px. On smaller screens, the elements get stacked (Ref Bootstrap Grids)

To display the columns on small screens (< 768px)

In addition to col-sm-xx you also need to add col-xs-xx, e.g.

<div class="row">
    <div class="col-sm-1 col-xs-2">
    [...]
    </div>

    <div class="col-sm-10  col-xs-8">
    [...]
    </div>

    <div class="col-sm-1 col-xs-2">
    [...]
     </div>
</div>

Note: the xs columns do not have to be the same percentage as on larger screens, so I'd suggest giving the smaller columns more space in the xs grid (e.g. make them 2/12 instead of 1/12 like in my example) because they will need more space to hold the buttons.

Upvotes: 1

Jade Cowan
Jade Cowan

Reputation: 2583

You can add a class to your div with the row class that uses two properties:

1) Display: flex, which will turn the div into a flex container.

2) flex-wrap: nowrap, this will prevent it from wrapping... thus keeping it on the same line.

Here's a codeply project with the class implemented.

CSS:

.d-nowrap-flex {
    display: flex;
    flex-wrap: nowrap;
}

Upvotes: 1

Related Questions