CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
liver
liver

Reputation: 498

Search form vertically fills navbar

I'm trying to put a search form inline within a navbar like so:

enter image description here

But I end up with a navbar like this:

enter image description here

What I'm trying to do is have the green search bar vertically fill the whole navbar. But when I add more padding, the navbar gets more padding also. How can I do it so that the search bar fills the whole navbar like in the first example?

EDIT

Here is the Bootply with static html: http://www.bootply.com/6UyH4u0NWy#

Upvotes: 2

Views: 428

Answers (2)

vanburen
vanburen

Reputation: 21663

This might get you headed in the right direction using .form-control to set the height of the input.

/* CSS used here will be applied after bootstrap.css */

/* nav */

.navbar-inverse .navbar-nav li a {
  padding-top: 15px;
  padding-left: 15px;
}
.navbar.navbar-inverse {
  background: white;
  border-bottom: solid 1px #979797;
}
.navbar-inverse .nav > li > a {
  color: #858585;
  font-weight: 500;
  font-size: 13.5px;
}
.navbar-inverse .nav > li > a:hover,
.navbar .nav > li > a:focus {
  color: black;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s;
}
.navbar-inverse .navbar-collapse {
  border-top: none;
  text-align: center;
  @media (max-width: 767px) {
    background-color: white;
  }
}
.navbar-header h4 {
  padding: 5px 0 0 10px;
}
.navbar-nav li .search-box {
  height: 100%;
  margin-top: none;
  background-color: #38A6A6;
  border: none;
  color: white;
  border-radius: 0;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: none;
}
.navbar-nav li input.search-query {
  height: 100%;
  padding-left: 26px;
}
.navbar-nav li form.form-search {
  height: 100%;
  position: relative;
}
.navbar-nav li form.form-search:before {
  height: 100%;
  display: block;
  width: 14px;
  height: 14px;
  content: "\e003";
  font-family: 'Glyphicons Halflings';
  color: white;
  background-position: -48px 0;
  position: absolute;
  top: 16px;
  left: 8px;
  z-index: 1000;
}
.navbar-nav li .form-control {
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <h4>Brand</h4>

    </div>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a>
      </li>
      <li><a href="#">Link</a>
      </li>
      <li><a href="#">Link</a>
      </li>
      <li><a href="#">Link</a>
      </li>
      <li>
        <form class="form-search form-inline">
          <input type="text" class="search-box form-control" placeholder="Recipient's username" aria-describedby="basic-addon2" />
        </form>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 1

Malcom
Malcom

Reputation: 478

How about setting the height of .form-search to 100% ? The reason it has this current height is because its scale depends on its content (height:auto by default). Also notice you got syntax errors in your html (closing li tag before closing form tag).

Upvotes: 1

Related Questions