I'm currently working with a static bootstrap navbar and trying to center a search box within it. Unfortunately, all my attempts have been unsuccessful so far. The search box either appears below the navbar or doesn't display at all. At this point, I've managed to make it visible, but it's positioned above the navbar title on the left side, not aligning vertically with the rest of the navbar items. I've experimented with using just a form, the navbar-center class, and now a div element, but none of them seem to be working as expected. It feels like there must be a simple Bootstrap class or CSS property that I'm overlooking.
<nav class="navbar navbar-default ">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="index.html"><img src="static/img/CAP-Seal-75x75.png" width=50 height=50 ></a>
<p style="padding-top:25px;width:120%;"></span>CAWG (TRACS) </p>
</div>
<div id="search" class="nav navbar-nav navbar-center">
<form class="nav navbar-nav navbar-center" role="search">
<input type="text" class="search form-control input-sm" placeholder="Search" id="sitesearch">
<button type="submit" class="btn btn-xs"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="padding-right:20px;">
<ul class="nav navbar-nav">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-th-list" aria-hidden="true" style="font-size:1.5em;"></span><i class="icon-angle-down"> </i></a>
<ul class="dropdown-menu">
<li><a href="#track_modal_realtime" data-toggle="modal">Real Time Tracking</a></li>
<li><a id="stop_tracking" href="#">Stop Tracking</a></li>
<li><a href="#track_modal_historical" data-toggle="modal">Historical Tracking</a></li>
<li><a href="#send_message_modal" data-toggle="modal">Communications</a></li>
</ul>
</li>
<li>
<a class="navbar-brand" href="#menu-toggle" id="menu-toggle"><span class="glyphicon glyphicon-resize-full" aria-hidden="true" id="sizeIcon" style="font-size:1.5em;"></span></a></li><!---->
<li><a href="#settings_modal" data-toggle="modal"><span class="glyphicon glyphicon-cog" style="font-size:1.5em;" aria-hidden="true"></span></a></li>
</ul>
</div>
</nav>
Do you have any suggestions or ideas that might help me solve this issue?
Thank you in advance!