Z-indexing of menu items

Hi,

I am having some difficulties I believe with the z-indexing of elements in my header.

I am trying to have a header which displays inline navigation, a search modal, and a drop down menu. I first setup the inline navigation and it worked fine. Then I setup the search and I found that the modal activated by clicking on search icon was not displaying. I looked in the forums and based on the ideas found there, I put the search element on another bar and put its z-index above the inline navigation. This indeed made the search modal appear but it also made it that if the items in the inline navigation were clicked over, nothing happened. I searched for a way to make not bars but containers or elements in the containers set on different z-index levels, but I couldn’t find any direct answer to this or figure out how to do it myself.

Similarly, I find that the dropdown for the inline navigation is also getting blocked behind other content.

So, I am wondering if I have missed the options in the pro builder for setting the z-index of containers/elements or where someone can send me some custom css to achieve this because as it is now, I am unable to get work features which one would expect to function properly as provided by the theme (the menu drop downs and search feature).

Thank you for your time.

K

Hi There,

  • Please change the z-index option of your bar to 99999:

  • If it doesn’t work, please turn off the Content Scrolling option:

Hope it helps :slight_smile:

Yes, turning off content scrolling solved it.

Thank you.

You’re welcome. Glad we could help.

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