I am currently working on creating a responsive navigation bar with bootstrap, similar to the one shown in this example.
However, I am facing issues with aligning the search button correctly and ensuring that the tabs remain intact when collapsed. Instead of the Download Wordpress button, I would like to include LogIn and SignUp buttons. When collapsed, I want the brand name, search button, and menu toggle bars to be displayed on the same line.
Could someone please advise me on how to achieve this? You can view my code here.
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand Name</a>
<form class="navbar-form navbar-right" style="float: right;" role="search">
<input type="text" class="form-control" placeholder="Search">
</form>
</div>
<div style="clear:both"></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Highlights</a></li>
<li><a href="#">Test Yourself</a></li>
<li><a href="#">Interesting Questions</a></li>
<li><a href="#">Ask Queries</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">SignUp</a></li>
<li><a href="#">LogIn</a></li>
</ul>
</div>
</div>
</nav>
.navbar {
min-height: 120px;
}
.navbar .container {
padding-top: 20px;
padding-bottom: 20px;
}
.navbar-nav>li>a {
text-transform: uppercase;
font-family: "jokerman";
font-size: 16px;
}
@media (min-width: 768px) {
.navbar-nav {
margin: 0 auto;
display: table;
table-layout: fixed;
float: none;
}
}