CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgridtwitter-bootstrap-3
harry
harry

Reputation: 67

How to increase the width of search bar in the navbar in twitter bootstrap3

I am unable to increase the size of the navbar's search box in twitter bootstrap3. I have tried putting them as grids but even then it didn't work. I can't increase the size of search box with percentage because when seen on mobile devices, the search bar looks too long compared to the rest of the content. This is the navbar code i have been using:

<nav class="navbar navbar-default nav-margin-bottom navbar-fixed-top" role="navigation">
    <div class="row">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header col-md-1">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <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="#" style="font-weight:500%; font-family:Roboto; margin-left:18px;">Test</a> 
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse col-md-10">
      <div class="col-md-5">
        <form class="navbar-form navbar-left" role="search">
            <input type="text" class="form-control home-search" placeholder="Search" >
        </form>
      </div>
      <div class="col-md-7 navbar-right">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><b>Abcd</b></a></li>
          <li><a href="#"><b>Efgh</b></a></li>
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Ijkl</b><b class="caret"></b></a>
            <!-- Link or button to toggle dropdown -->
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Mno</b></a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Pqrs</b></a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Settings</b></a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Log out</b></a></li>
            </ul>
          </li>
        </ul>
      </div>
      </div><!-- /.navbar-collapse -->
    </div> <!-- /.row -->
  </nav>

The navbar looks like this: enter image description here

Upvotes: 3

Views: 12150

Answers (3)

Sarfaraz Sphere
Sarfaraz Sphere

Reputation: 1

Hi I was currently having the same issue but I figured it out and it worked for me hope it work for you too have a look 

<div class="collapse navbar-collapse" id="toggleNavigation">
    <div class="col-sm-5">
        <form class="form" role="search" style="margin-top: 8px;">
            <div class="input-group">
                <input type="search" placeholder="Query?" class="form-control">
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-warning">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </button>
                </span>
            </div>
        </form>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
        </ul>
    </div>
</div>

Upvotes: 0

Bass Jobsen
Bass Jobsen

Reputation: 49044

The solution from @marvin seems to work (overwrite all) you could make it more responsive by adding media queries like:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { .home-search { width: 400px; }}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { .home-search { width: 600px; } }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { .home-search { width: 800px; } }

The real problem seems the way you use the grid classes to set the widths:

you use:

<div class="collapse navbar-collapse col-md-10">
      <div class="col-md-5">

Due to the nesting the available space for your form become (10/12 ) * (5/12) * 100 = 34% of the viewport. You also use navbar-left for the form which also prevent expanding (due to the width:auto of navbar-form) of the input to the right.

Try to use the grid classes in such way that the columns sum up to 12 for every grid, like

<div class="navbar-header col-sm-1 col-md-1 col-lg-1">Logo</div>
<div class="collapse navbar-collapse">
<div class="col-sm-6 col-md-7 col-lg-8">searchform</div>
<div class="col-sm-5 col-md-4 col-lg-3 navbar-right">Right nav</div>

Resulting in something like:

<nav class="navbar navbar-default nav-margin-bottom" role="navigation">
    <div class="row">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header col-sm-1 col-md-1 col-lg-1">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <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="#" style="font-weight:500%; font-family:Roboto; margin-left:18px;">Test</a> 
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse">
      <div class="col-sm-6 col-md-7 col-lg-8">
        <form class="navbar-form" role="search">
            <input type="text" class="form-control" placeholder="Search" >
        </form>
      </div>
      <div class="col-sm-5 col-md-4 col-lg-3 navbar-right">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><b>Abcd</b></a></li>
          <li><a href="#"><b>Efgh</b></a></li>
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Ijkl</b><b class="caret"></b></a>
            <!-- Link or button to toggle dropdown -->
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Mno</b></a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Pqrs</b></a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Settings</b></a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Log out</b></a></li>
            </ul>
          </li>
        </ul>
      </div>
      </div><!-- /.navbar-collapse -->
    </div> <!-- /.row -->
  </nav>

Upvotes: 4

Marvin
Marvin

Reputation: 371

Add this class in your main.css and scale the width

CSS

.home-search {
   width: 500px;
 }

Upvotes: 2

Related Questions