Dropdown Search Results in Header Are Cut Off

Support
#1

I am using Pro Theme with WooCommerce. I have added an Ajax Search bar in the header using a sidebar widget that shows search results in a dropdown below the search entry box. My issue is that the dropdown box appears behind the second header bar that is right below it. Once it goes past that second header bar, the dropdown contents are visible again on top of the page content. How can I set the dropdown box to appear on top of the header bar below instead of hiding behind it?

#2

Hello @clienttech,

Thanks for asking. :slight_smile:

Reading the ticket’s description it seems the issue of z-index property. Please set z-index appropriately to display search result above the element. To learn more about z-index, please take a look at following resource.

https://www.w3schools.com/cssref/pr_pos_z-index.asp

https://medium.freecodecamp.org/z-index-explained-how-to-stack-elements-using-css-7c5aa0f179b3?gi=7ee3c328cb58

Thanks.

#3

Thank you! I reversed the z-index values of the two bars and now everything works perfectly!

#4

Glad we were able to help :slight_smile:

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.