I am currently designing a navigation bar using Bootstrap 4, with the following elements arranged from left to right:
- The Logo (brand)
- A search bar
- The website's navigation
My aim is to have the search box stretch across the entire space available between the logo and navigation. Here is my code snippet so far:
.navbar {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
background: #191919;
}
.navbar-inverse .navbar-nav a {
text-transform: uppercase;
}
.navbar-inverse .navbar-nav .nav-link {
color: #fff;
}
.navbar-inverse .navbar-nav .dropdown-menu {
padding: 0;
border-radius: 0;
top: 47px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
.navbar-inverse .navbar-nav .dropdown-menu a {
padding: 11px 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
color: #757575;
}
.navbar-inverse .navbar-nav .dropdown-menu a:hover {
color: #555;
}
.navbar-inverse .navbar-nav .dropdown-menu a:last-child {
border-bottom: none;
}
.navbar-inverse .form-inline {
display: block;
width: auto;
}
.navbar-inverse .form-inline .bg-white {
background: #fff;
border: none;
padding-top: 0;
padding-bottom: 0;
margin-top: 1px;
height: 37px;
}
.navbar-inverse .btn-outline-secondary {
border: 1px solid #fff;
color: #fff;
}
.navbar-inverse .btn-outline-secondary:hover {
background: #fff;
color: #0275D8;
}
.container {
margin-top: 56px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNav">
<form class="form-inline mx-auto">
<div class="input-group">
<input class="form-control border-right-0" placeholder="Search here...">
<span class="input-group-addon bg-white border-left-0"><i class="fa fa-search"></i></span>
</div>
</form>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-folder-open" aria-hidden="true"></i>
Categories</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sports</a>
<a class="dropdown-item" href="#">Hot</a>
<a class="dropdown-item" href="#">Mad Science</a>
</div>
</li>
<li>
<a href="#" class="btn btn-outline-secondary"><i class="fa fa-user"></i> My account</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus mollitia, minima aliquam soluta ducimus sint obcaecati rerum inventore, ipsa nobis dignissimos, reiciendis, numquam cum sit cumque suscipit voluptatibus a est?</p>
</div>Upon testing on wide screens, it appears that the search box is too small. I would like its left side to be positioned 15px away from the logo, while its right side should be situated 15px away from the navigation. What adjustments do I need to make?