MustModify MustModify - 6 months ago 87
HTML Question

Aligning search bar for mobile and desktop with bootstrap 3.3

I want my search box to appear in the nav bar on the desktop and in mobile. Currently, when I reduce the width, the search bar drops to the next line. I can't figure out how to keep it flush with the nav bar.

Here's the code: http://plnkr.co/edit/Unr6MEiIkF6WpXwCCgkF?p=preview

I was able to accomplish the desired affect by inserting a second search box within the 'navbar-header' section, but that caused by typeahead code to go crazy.

Code



Here's the
header
section of my HTML:

<header>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="hidden-xs">
<a class="navbar-brand" href="/">Some Project</a>
</div>
<div class="visible-xs">
<a class="navbar-brand" href="/">P</a>
</div>
</div>
<div class="navigation">
<div class="pull-right" id="navbar-search-area">
<form class="navbar-form site-search" id="new_search" action="/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<div class="form-group">
<div class="icon-addon addon-sm">
<input id="search" placeholder="search" input-html="col-xs-5 col-sm-3 col-md-4" type="text" name="search[term]" />
<label class="glyphicon glyphicon-search" rel="tooltip" title="search"></label>
</div>
</div>
</form>
</div>
<div class="collapse navbar-collapse header-collapse" id="navbar-section-1">
<ul class="nav navbar-nav">
<li>
<a href="/things">Pick Me!</a>
</li>
<li>
<a href="/thing/2">me me me me!</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>


Any guidance would be appreciated.

References



Other people have had similar questions but they all seem a little different, in large part because there isn't a super-standard way to do this, and because people want their web pages to behave in different ways.

Aligning search bar for mobile with bootstrap 3

[update] updated css in plunkr to show that the nav bar stretches across the top in a different background color.

Answer

Pulling the search and collapsed navbar out of the header and right aligning them seems to do the trick

http://plnkr.co/edit/B4gIfAkNiwkBId9fbLVi?p=preview

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <title>AngularJS Plunker</title>
    <!-- your app.js file -->
    <script src="app.js"></script>
    <!-- bootstrap css -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <!-- your style.css file -->
    <link href="style.css" rel="stylesheet" />
  </head>

  <body class="pages welcome">
      <style>
        body { background-color: #F9F7F5; }
      </style>
      <header>
        <div class="navbar navbar-default navbar-static-top" role="navigation">

          <button class="pull-right navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <div class="pull-right" id="navbar-search-area">
            <form class="navbar-form site-search" id="new_search" action="/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
              <div class="form-group">
                <div class="icon-addon addon-sm">
                  <input id="search" placeholder="search" input-html="col-xs-5 col-sm-3 col-md-4" type="text" name="search[term]" />
                  <label class="glyphicon glyphicon-search" rel="tooltip" title="search"></label>
                </div>
              </div>
            </form>
          </div>

          <div class="container">
            <div class="navbar-header">
              <div class="hidden-xs">
                <a class="navbar-brand" href="/">Some Project</a>
              </div>
              <div class="visible-xs">
                <a class="navbar-brand" href="/">P</a>
              </div>
            </div>
            <div class="navigation">
              <div class="collapse navbar-collapse header-collapse" id="navbar-section-1">
                <ul class="nav navbar-nav">
                  <li>
                    <a href="/things">Pick Me!</a>
                  </li>
                  <li>
                    <a href="/thing/2">me me me me!</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </header>
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-md-push-2">
            <h1 class="page-title">Welcome to the Project</h1>
            <p>This is the body.</p>
          </div>
        </div>
      </div>
  </body>
</html>