CODEWITHSUNDEEP
csstwitter-bootstrap
MChan
MChan

Reputation: 7162

Adding search form to top navbar bootstrap

I am trying to add search form to the top navbar code shown below so that it will appear just before the Logout link with a small space and aligned to the right side, but it always appear either after the logout link or it will expand the navbar and look bad.

So can someone please help me by telling me what I am missing here? Thanks for your time.

Head section:

<head>
 <link rel="stylesheet" href="css/bootstrap.css"> 
 <script type="text/javascript" src="js/jquery-2.0.3.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 <title>Test</title>
</head>

Body section:

<nav class="navbar navbar-inverse" role="navigation">  
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Company</a>
  </div>

  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">      
      <li><a href="#" class="current">Home</a></li>               
      <li class="active dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Employees <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">New Employee</a></li>
              <li class="divider"></li>
              <li class="nav-header">Reports</li>
              <li><a href="#" target="_blank">Employees List</a></li>
            </ul>
      </li>                   
    </ul>

    <ul class="nav navbar-nav navbar-right">    

    <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="input-small" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
    </form> 

      <li><a href="#">Logout</a></li>      
    </ul>
  </div>   
</nav>

Upvotes: 0

Views: 5195

Answers (1)

Markus Kottl&#228;nder
Markus Kottl&#228;nder

Reputation: 8268

You cannot put a <form> inside of an <ul> but not wrapped in a <li> so here is what seems to work:

jsFiddle

<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Company</a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li>
                <a href="#" class="current">Home</a>
            </li>
            <li class="active dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Employees <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#">New Employee</a>
                    </li>
                    <li class="divider"></li>
                    <li class="nav-header">Reports</li>
                    <li>
                        <a href="#" target="_blank">Employees List</a>
                    </li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#">logout</a>
            </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
</nav>

Upvotes: 2

Related Questions