CODEWITHSUNDEEP
htmltwitter-bootstrapnavbar
Andrew Abalos
Andrew Abalos

Reputation: 21

bootstrap navbar form under the navbar brand and link

I'm trying to make the form for the username,password, and button to be on the same line as the navbar brand and the a tags but for some reason it appears to be under them.

What would be the fix for this?

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

  <div class="container">

  <a class="navbar-brand" href="#"> Log Me In! </a>

  <button class="navbar-toggle" data-toggle="collapse" data-target="navHeaderCollapse">

  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>


  <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Location</a></li>
    </ul>
  </div>
  <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" name="" value="" id="username" placeholder="Username">
                </div>
                <div class="form-group">
                    <input type="password" name="" value="" id="password" placeholder="Password">
                </div>
                <input type="button" id="logIn" value="Login">
  </form>
  </div>
</nav>

Upvotes: 0

Views: 2185

Answers (3)

this.girish
this.girish

Reputation: 1306

you need to wrap your form inside collapsible div

this is how you can do

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

  <div class="container">

  <a class="navbar-brand" href="#"> Log Me In! </a>

  <button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">

  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>


  <div class="collapse navbar-collapse" id= "navHeaderCollapse">

    <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Location</a></li>
    </ul>
 
  <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" name="" value="" id="username" class="form-control" placeholder="Username">
                </div>
                <div class="form-group">
                    <input type="password" name="" value="" id="password" class="form-control" placeholder="Password">
                </div>
                <input type="button" class="btn btn-sm btn-primary"  id="logIn" value="Login">
  </form>
   </div>
  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

and also give class="form-control" to your textboxes and class="btn btn-sm btn-primary" to get nice well styled button :) expand snippet(full screen) to see changes, i have made your menu collapsible too , it's not working in your given example

Upvotes: 0

ricopo
ricopo

Reputation: 475

take a look.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Log Me In !</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">About</a></li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Username">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-default">Login</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Can you check the result in codepen https://codepen.io/ricopo/pen/ZKXOYQ

Hope I helped you!

Upvotes: 0

Rajan Patil
Rajan Patil

Reputation: 1002

You need to move the form within your div with class "collapse navbar-collapse navHeaderCollapse" like this.

 <div class="collapse navbar-collapse navHeaderCollapse">
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Location</a></li>
    </ul>

    <form class="navbar-form navbar-right" role="search">
      <div class="form-group">
        <input type="text" name="" value="" id="username" placeholder="Username">
      </div>
      <div class="form-group">
        <input type="password" name="" value="" id="password" placeholder="Password">
      </div>
      <input type="button" id="logIn" value="Login">
    </form>
  </div>

Upvotes: 1

Related Questions