Bootstrap Navbar with dynamic search box

Question

I'm trying to figure out how to make the above code behave well on displays > 768px and < 768px. Right now is working fine for resolutions below 768px, but I can't make it work for resolutions above that.

That's the what I'm trying to do:

Resolution above 768px - Full page (search box with 100% remaining width):

Resolution below 768px (only search box visible):

Code:

.navbar .navbar-form {
  padding: 0;
  margin-right: 0;
  margin-left: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.clear {
  width: 1%;
  display: table-column;
}

@media(max-width:767px) {

  .navbar .navbar-form {
    padding-left: 15px;
    padding-right: 0;
  }

  .navbar .navbar-form .input-group {
    padding-right: 15px;
  }

  .navbar .navbar-form .form-control {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" 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 hidden-xs" href="/">Title</a>
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for..."/>
                        <span class="clear hidden-sm hidden-md hidden-lg"></span>
                        <span class="input-group-btn hidden-xs">
                            <button class="btn btn-default" type="button">Go!</button>
                        </span>
                    </div>
                </div>
            </form>
        </div>

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

            <ul class="nav navbar-nav navbar-right">
                <li><a href="/webpage1">Webpage 1</a></li>
                <li><a href="/webpage2">Webpage 2</a></li>
            </ul>

        </div>
    </div>
</nav>

Answer 1

Whew, you have yourself a nasty little problem here. It took me a while, but I think I've gotten you a solution together.

First, you need to do the following:

• Add display: inline to your form-group
• Add display: table to your input-group
• Add width: 1% to your input-group-btn

These changes are from this issue here (what you want, but keeps the search bar inside the collapse menu) - Bootstrap 3 - How to maximize input width inside navbar

The next changes you need to make are for when you are above the 768px breakpoint, otherwise it will mess up your collapse menu.

@media(min-width:768px) {
    .container-fluid {
        display: flex;
    }
    .navbar-header {
        flex: 1;
    }
}

Lastly, you need to remove navbar-right from your navbar-form.

Here is a JSFiddle - An embedded snippet is also included.

.navbar .navbar-form {
  padding: 0;
  margin-right: 0;
  margin-left: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.clear {
  width: 1%;
  display: table-column;
}

@media(max-width:767px) {

  .navbar .navbar-form {
    padding-left: 15px;
    padding-right: 0;
  }

  .navbar .navbar-form .input-group {
    padding-right: 15px;
  }

  .navbar .navbar-form .form-control {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

@media(min-width:768px) {
    .container-fluid {
        display: flex;
    }
    .navbar-header {
        flex: 1;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" 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 hidden-xs" href="/">Title</a>
            <form class="navbar-form" role="search">
                <div class="form-group" style="display: inline">
                    <div class="input-group" style="display: table">
                        <input type="text" class="form-control" placeholder="Search for..."/>
                        <span class="clear hidden-sm hidden-md hidden-lg"></span>
                        <span class="input-group-btn hidden-xs" style="width: 1%">
                            <button class="btn btn-default" type="button">Go!</button>
                        </span>
                    </div>
                </div>
            </form>
        </div>

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

            <ul class="nav navbar-nav navbar-right">
                <li><a href="/webpage1">Webpage 1</a></li>
                <li><a href="/webpage2">Webpage 2</a></li>
            </ul>

        </div>
    </div>
</nav>