I am attempting to center my search bar when it is collapsed.
Currently, it appears like this:
As you can see, the links are centered, but not the search bar.
This is the existing HTML structure:
<!-- Navigation Bar Start -->
<div class = "navbar navbar-default navbar-static-top">
<!-- Container -->
<div class = "container">
<div class=".navbar-header">
<!-- Site Title -->
<a href = "#" class = "navbar-brand">James Woods</a>
</div> <!-- END Navbar Header -->
<!-- Mobile Nav Button -->
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button> <!-- END Mobile Nav Button -->
<!-- Navigation Links -->
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class="active"><a href = "">Home</a></li>
<li><a href = "">Creations</a></li>
<li><a href = "blog/index.html">Blog</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Links<b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a href = "#">Twitter</a></li>
<li><a href = "#">Deviant Art</a></li>
<li><a href = "#">Scratch</a></li>
</ul>
</li> <!-- END Links Nav -->
<li><a href = "contact.html">Contact Me</a></li>
<li>
<form class="navbar-form navbar-left form-inline" id="search" role="search">
<div class="form-group-group">
<div class="input-group" style="width: 220px;">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><b class = "glyphicon glyphicon-search"></b></button>
</span>
</div>
</div> <!-- END form group div -->
</form> <!-- END search bar form -->
</li>
</ul> <!-- END navbar list -->
</div> <!-- END navbar collapse div -->
</div> <!-- END .navbar-header div -->
</div> <!-- END container div -->
</div> <!-- END navbar div -->
<!-- END ALL NAVBAR CONTENT -->
And here is the applied custom CSS:
@media (max-width: 768px){
.navbar-nav li{
text-align: center;
}
}