I'm having trouble fitting a navbar with these elements:
- My brand logo
- A lengthy search bar and submit button filling the entire height of the navbar.
- Space at the end of #2 for another button of equal height.
... all in one line without collapsing.
But no matter what I try, I can't seem to keep anything on the same line as the nav bar once I add the search bar from #2. I've experimented with different tactics like putting the search form in a column below, using display: inline in various places, or utilizing navbar-right, etc.
If you know of an easy solution, please share it with me. I also need some control over the length of the search field.
#searchBar {
border-left: 1px solid rgb(216, 216, 216);
border-right: 1px solid rgb(216, 216, 216);
}
#searchText {
height: 62px;
}
#searchButton {
background-color: Transparent;
border: 0px;
height: 63px;
}
#navigationBar {
box-shadow: 0px 4px 8px -3px rgba(17, 17, 17, .16);
height: 63px;
}
a.navbar-brand {
padding: 0px;
}
.logo-small {
margin-right: 14px;
margin-top: 7px;
margin-left: 19px;
width: 49px;
} <nav class="nav" id="navigationBar">
<a class="navbar-brand" href="/""><img src="mylogo.png" class="logo-small">BRAND IMAGE</a>
<div class="row">
<div class="col-sm-10">
<form>
<div class="input-group" id="searchBar">
<input type="text" class="form-control" id="searchText" placeholder="Search here." onsubmit="search()">
<span class="input-group-btn">
<button type="button" id="searchButton" onclick="this.blur();"><i class="flaticon-search"></i></button>
</span>
</div>
</form>
</div>
<div class="col-sm-2">
<!-- HERE is where I want to place another button to fill the remaining space in the nav bar -->
</div
</nav>