Search bar issue

[lgreenni]

I've been working on the look and feel of the DiVino ReadyTheme on our dev store. Here is a link: http://dev.videoranch3d.com/. The issue I'm having is that when I type something into the search bar, the options listed show up behind the top navigation bar. How can I fix this issue?

[hmendenhall]

It looks like the Header template has been modified quite a bit reverting the template back should fix the issue. I think the following code should come after
<span class="mini-basket-count inline-block" id="js-mini-basket-count">&mvte:global_minibasket:basket_count;</span>
</span>
</li>
</ul>




<div class="show medium-hide">
<form data-hook="global-search-drawer" method="get" action="&mvte:urls:SRCH:rr;">
<div class="row wrap">
<div class="column five-sixths nrp">
<label for="l-mobile-search" class="sr-only">Search</label>
<input class="js-autocomplete-input" id="l-mobile-search" name="Search" type="search" value="" placeholder="Search our entire store&hellip;" data-api-url="&mvte:urls:API:rr;" autocomplete="off">
</div>
<div class="column one-sixth nlp">
<button type="submit" class="button button-square button-block column one-sixths bg-transparent mobile-srch-btn" data-icon="&#x55;" title="Search"><span class="sr-only">Search</span></button>
</div>
</div>
</form>
</div>

http://puu.sh/ptPH2/aaf33a29b4.png

[lgreenni]

I can't really reset the code, though, because we don't want the original template. We want to have the cowboy where it is, but I'm not sure how to make the search bar work where it's located. I had to move the search bar down from it by using a filler image in order to actually use the search bar. Otherwise, if the search bar is directly under the cowboy, I can't even use the search bar.

[AHerb]

I can't really reset the code, though, because we don't want the original template. We want to have the cowboy where it is, but I'm not sure how to make the search bar work where it's located. I had to move the search bar down from it by using a filler image in order to actually use the search bar. Otherwise, if the search bar is directly under the cowboy, I can't even use the search bar.

add custom css in the header
<style>
.autocomplete-results {z-index: 33;}
</style>

seems to fix your issue