I am trying to center my search box in my navbar, but the search box displaces other items like the navigation items and logo
Here is a pic of what i am trying to achieve
it's really frustrating, below is what my navbar code looks like
<nav class="navbar navbar-default" id="title">
<div class="container">
<a href="index" class=" navbar-brand ">
<img src="/assets/img/logo.png" srcset="/assets/img/logo2.png 2x, img/logo3.png 3x" alt="Post">
</a>
<!-- the search container -->
<div class="search-container">
<form class="search" action="/action_page.php">
<input class="" type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<ul class="nav navbar-nav main-navbar-nav">
<li><a href="#xcart" class=" fa fa-cart-plus" onclick="toggle_visibility('myCart');"> Cart</a></li>
<span class="header-icons-noti-top-aft">5</span>
<li><a href="#xcart" class=" fa fa-bell" onclick="toggle_visibility('myNotification');"></a></li>
<!-- /.navbar-collapse -->
<span class="header-icons-noti-noti">1</span>
<li><a href="#xaccount" class=" fa fa-user-o" onclick="toggle_visibility('myForm');"> Hi,
<b>
<?php if (isset($_SESSION['user'])){ echo $_SESSION['firstname']; } else {echo "Login"; }?></b> <i class="fa fa-caret-down"></i></a></li>
</div>
</div>
</nav>
then the css for my search box
form.search {
margin: 0 auto;
}
form.search input[type=text] {
color: #333;
background-color: white;
text-align: center;
text-transform: uppercase;
padding: 5px 10px;
margin: 10px;
display: inline-block;
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
border: 2px solid #777;
width: 350px;
margin-right: 0px;
border-right: none;
}
form.search button {
color: white;
background-color: brown;
text-align: center;
text-transform: uppercase;
padding: 5px 10px;
margin: 10px;
display: inline-block;
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
border: 2px solid brown;
width: 120px;
margin-left: -3px;
border-left: none;
}
form.search button:hover {
background: brown;
}
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.example button {
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
for some reason it seems like the search form is taking full width on the navbar
Does anyone have any ideas as to what might be the cause
also i can't seem to keep the notification badges with the text its meant to follow( for example if i were to resize the browser the notification circles don't follow either the notification icon or cart
EDIT i have tried my best to replicate the navbar in the js fiddle below
NB: stretch the output box of the fiddle horizontally to see the problem
adding bootstrap's 'col-md-6' fixes the issue and puts everything on the same line, although this is a very buggy fix and i'm sure there is a better way to go about this