Bootstrap Search box width in Navbar - html

Question

Currently working on my navbar and would like to have the width of the search bar wider so the navbar does not look too segmented. I've played around with the width on CSS and haven't had any luck. I've also looked at similar questions on this site but have not found the solution. Please see my code below.
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<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">
<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 page-scroll" href="#page-top">HELLO</a>
</div>
<!-- SEARCH FORM -->
<form id="navsearch" class="navbar-form pull-right" role="search" action="" method="post">
<div class="input-group" display="inline">
<input name="search" type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default btn" name="submit" class="btn btn-lg" type="submit">
<span class="glyphicon glyphicon-search" ></span>
</button>
</div>
</form>
<!--Button to Upload Information -->
<div class="container text-center">
<div class="call-to-action">
Upload Your Story
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Submit</h4>
</div><!-- end modal-header -->
<div class="modal-body">
<h4></h4>
<p><small class="text-muted">Tell us</small></p>
<form action="forms.php" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label" name="name" >Name</label>
<div class="col-lg-10">
<input class="form-control" name="name" placeholder="Name" type="text">
</div>
</div>
<div class="form-group" method="post">
<label class="col-lg-2 control-label" name="yourStory">Your Tell All</label>
<div class="col-lg-10">
<textarea class="form-control" name="yourStory" placeholder="Tell us your story" rows="3"></textarea>
</div>
<div class="form-group">
<label class="col-lg-2" for="inputFile">File input</label>
<input type="file" name="inputfile" id="inputFile">
</div>
<br>
<div class="form-group">
<div class="col-lg-10">
<button name="submit" class="btn btn-success active" type="submit">Submit</button>
</div>
</div>
</form>
</div><!-- end modal-body -->
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button> <button class="btn btn-primary" type="button">Save changes</button>
</div><!-- end modal-footer -->
</div><!-- end modal-content -->
</div><!-- end modal-dialog -->
</div><!-- end myModal -->
<!-- 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 navbar-right">
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
CSS
/* --------------------------------------
Navbar
-------------------------------------- */
.navbar-default {
border-color: rgba(255,255,255, 0.7);
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
background-color: rgba(255,255,255, 0.7);;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#searchInput {
width: 200px;
}
.navbar-brand {
padding: 13px 15px;
}
#mainNav{
padding-top: 10px;
padding-left: 20px;
}
#search{
width: 500px;

Answer 1

This may help as it's an alternate way of setting up your navbar so you can adjust your search input to whatever makes sense and use media queries with it.
*I also adjusted your modal because it was in the from place and had some errors in it etc. See working example.
body,
html {
margin-top: 60px;
}
.navbar.navbar-custom {
border: none;
background: white;
-webkit-box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.15);
-moz-box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.15);
box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.15);
}
.navbar.navbar-custom .form-search {
right: 0;
top: 0px;
position: fixed;
margin: 0;
border: none;
}
.navbar.navbar-custom .form-search .search-box {
height: 50px;
border-radius: 0;
border: none;
width: 700px;
box-shadow: none;
outline: none;
}
.navbar.navbar-custom .btn.btn-search {
height: 50px;
border-radius: 0;
border: none;
background: grey;
color: white;
}
.navbar.navbar-custom .btn.btn-upload {
float: 0;
height: 50px;
border-radius: 0;
border: none;
background: #a94442;
color: white;
}
.navbar.navbar-custom .navbar-header .navbar-toggle,
.navbar.navbar-custom .navbar-header .navbar-toggle:hover,
.navbar.navbar-custom .navbar-header .navbar-toggle:focus {
background: none;
border: none;
}
.navbar.navbar-custom .navbar-header span.icon-bar {
background: #444;
}
#media (min-width: 768px) {
.navbar.navbar-custom {
height: 50px;
}
}
#media (max-width: 992px) {
.navbar.navbar-custom .form-search .search-box {
width: 500px;
}
}
#media (max-width: 767px) {
.navbar.navbar-custom .form-search {
right: 70px;
}
.navbar.navbar-custom .form-search .search-box {
width: 225px;
}
}
#media (max-width: 480px) {
.navbar.navbar-custom .navbar-brand {
display: none;
}
.navbar.navbar-custom .form-search .search-box {
width: 70%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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="#">HELLO</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li>Home
</li>
</ul>
</div>
</div>
<form class="form-search">
<div class="input-group"> <span class="input-group"> <span class="input-group-btn" role="group" aria-label="...">
<button type="button" href="#myModal" data-toggle="modal" class="btn btn-upload">Upload</button>
</span>
<input type="text" class="form-control search-box" placeholder="Search"> <span class="input-group-btn" role="group" aria-label="...">
<button type="button" class="btn btn-search"><i class="fa fa-search"></i></button>
</span> </span>
</div>
</form>
</nav>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Submit</h4>
</div>
<!-- end modal-header -->
<div class="modal-body"> <small class="text-muted">Tell us</small>
<form action="forms.php" method="post" class="form-horizontal">
<label for="name" name="name">Name</label>
<input class="form-control" name="name" placeholder="Name" type="text">
<br>
<label for="yourStory" name="yourStory">Your Tell All</label>
<textarea class="form-control" name="yourStory" placeholder="Tell us your story" rows="3"></textarea>
<br>
<label for="inputFile">File input</label>
<input type="file" name="inputfile" id="inputFile">
<br>
<button name="submit" class="btn btn-success active" type="submit">Submit</button>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" type="button">Save changes</button>
</div>
</div>
</div>
</div>
<!-- end myModal -->
<div class="container">
<div class="alert alert-info">Yo</div>
</div>