My issue is with the autocomplete box - I want it to have the same width as the entire search box. Something like this using Bootstrap's col-xs-11 class:
https://i.sstatic.net/npzhC.png
If I set the position to "relative," it looks like this (all stays inside the navbar):
https://i.sstatic.net/DIPBG.png
But when I set the autocomplete box position to fixed, it changes the width like this:
https://i.sstatic.net/77C8G.png
Here is my code:
<div id="buscqueda" class="navbar-search smallsearch col-sm-8 col-xs-11">
<div class="row">
<input class="navbar-input col-xs-10" type="" placeholder="Buscar productos" name=""> <button class="navbar-button col-xs-1"> <svg width="15px" height="15px">
<path d="M11.618 9.897l4.224 4.212c.092.09.1.23.02.312l-1.464 1.46c-.08.08-.222.072-.314-.02L9.868 11.66M6.486 10.9c-2.42 0-4.38-1.955-4.38-4.367 0-2.413 1.96-4.37 4.38-4.37s4.38 1.957 4.38 4.37c0 2.412-1.96 4.368-4.38 4.368m0-10.834C2.904.066 0 2.96 0 6.533 0 10.105 2.904 13 6.486 13s6.487-2.895 6.487-6.467c0-3.572-2.905-6.467-6.487-6.467 "></path>
</svg> </button>
</div>
<div class="autocom-box row">
<li class="col-xs-11">producto 1</li>
<li class="col-xs-11">producto 2</li>
<li class="col-xs-11">producto 3</li>
<li class="col-xs-11">producto 4</li>
</div>
</div>
And here is the CSS:
.autocom-box li{
background-color: white;
color: black;
padding: 10px 20px;
}
.autocom-box{
position: fixed;
z-index: 9999;
border-top: 1px solid black;
box-shadow: 4px 4px 8px -1px black;
}