CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
TDP
TDP

Reputation: 97

How to align the search form within the navbar header?

I've got a brand image and a list including 2 glyph-icons & and search form within a navbar header but the search form button won't stay within the the nav bar and drops to the line below.

Does anyone know the CSS trick to get it onto the same line next to the rest of the li links?

All the CSS is bootstraps native commands.

To fully understand, a current photo:

enter image description here

HTML:

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <div class="navbar-header">
        <img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/>
      </div>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
        <li>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </li>
      </ul>
    </div>
  </div>
</nav>

Upvotes: 0

Views: 2163

Answers (3)

G.L.P
G.L.P

Reputation: 7207

Instead of form group you can try input group like this: Demo

<div class="input-group">
            <input type="text" class="form-control" placeholder="Search">
            <span class="input-group-btn">
    <button class="btn btn-default" type="button">Submit</button>
      </span>
</div>

Upvotes: 0

Mosh Feu
Mosh Feu

Reputation: 29249

Add class .form-inline to the .form-control div. Also, insert the button to that div.

See the result:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <div class="navbar-header">
        <img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/>
      </div>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
        <li>
          <div class="form-group form-inline">
            <input type="text" class="form-control" placeholder="Search">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

http://jsbin.com/gogeyiy/edit?html,output

Upvotes: 1

Roman
Roman

Reputation: 3941

Its simple you have to add the css rule display: inline-block; to your form-group and thats it. You could even remove the surrounding li

Check Fiddle

Upvotes: 1

Related Questions