Vianne Yu Zhèng Vianne Yu Zhèng - 3 months ago 77
CSS Question

Fixed Search Box in Bootstrap Navbar

I'm trying to figure out how to make the search box fixed in the navigation bar instead of being part of the dropdown menu. The final output would be something similar to the image below.

Bootstrap Nav



<div class="container-fluid">
<!-- add header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>

<!-- add menu -->
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/services.html">Services</a></li>
</ul>

<!-- add search form -->
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search this site">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>




Here's the code I'm currently working on: http://www.bootply.com/fb311f2zSJ#

Answer

Try this:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

/* CSS used here will be applied after bootstrap.css */
.navbar-header form {
    position: absolute;
    right: 20px;
    max-width: 250px;
}
button.navbar-toggle.pull-left {
    margin-left: 15px;
}
@media only screen and (max-width:768px){
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: rgba(0,0,0,0);
    margin-top: 0;
    padding-top: 8px;
}
.navbar-form {
    padding: 10px 15px;
    margin-top: 8px;
    margin-right: -15px;
    margin-bottom: 8px;
    margin-left: -15px;
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 0px 0 rgba(255,255,255,.1);
}
}
<nav class="navbar navbar-inverse" role="navigation">

    <div class="container-fluid">
        <!-- add header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#navbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
               <!-- add search form -->
            <form class="navbar-form navbar-right" role="search">
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search this site">
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-default">
                        <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>

        <!-- add menu -->
        <div class="collapse navbar-collapse" id="navbar1">
          <ul class="nav navbar-nav" style="width:100%">
              <li class="active"><a href="/">Home</a></li>
              <li><a href="/about.html">About</a></li>
              <li><a href="/services.html">Services</a></li>     
            </ul>    
        </div>
    </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Comments