Having trouble creating a navbar and encountering two issues.
- The search text bar's width is not 100%, it should fill the width to 100% of its column.
- The Glyphicons are not vertically aligned.
For reference, you can check out this JSFiddle link
Any assistance would be greatly appreciated. Thank you.
html {
background-color: #F4F5F9
}
body {
padding-top: 50px;
}
.navbar.navbar-default {
background-color: #3b5998;
color: #fff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: transparent;
box-shadow: none;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="col-xs-8 col-md-8 col-lg-8">
<form class="navbar-form navbar-right">
<div class="form-group">
<div class="input-group input-group-md">
<span class="input-group-addon transparent"><span class="glyphicon glyphicon-search" style="margin-top: 0px;"></span></span>
<input class="form-control left-border-none" placeholder="Search things..." type="text" name="search_text">
</div>
</div>
</form>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<form class="navbar-form navbar-left">
<div class="form-group">
<a href="#"><span class="glyphicon glyphicon-home" style="font-size: 21px; margin-top: 0px;"></span></a>
<a href="#"><span class="glyphicon glyphicon-envelope" style="font-size: 21px;margin-top: 0px;"></span></a>
<a href="#"><span class="glyphicon glyphicon-user" style="font-size: 21px;margin-top: 0px;"></span></a>
</div>
</form>
</div>
</div>
</nav>