Drop Down (Nested) Menu Not Working on Homepage - Conflict with Slidshow Image?

[Marchioness]

Hi -

My drop down menu is suddenly not working. It was fine yesterday, and I have made no changes to our website at all, recently, outside of creating products. It looks like the menu might be going behind the slideshow image, below it, which has also been the same for a long time. The drop down menu is working fine on all other pages. We use the Blockshop theme. I have searched for solutions but nothing has worked. Can anyone help?

Thanks!

[Marchioness]

Hi Feezar. I tried various z-index css fixes I found on this site, with no luck. Thanks for responding, but I don't see any code.

[devcoders]

Hello @Marchioness 
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

[BiDeal-Discount]

Hi @Marchioness 

I just checked your store. Let try to add this css to your store:

.x-menu--level-1--link[data-x-menu--open="true"] > .x-menu--level-2--container{
  display: flex;
  opacity: 1;
}

[Marchioness]

Hi Bi-Deal. The problem for me was that my theme is quite old and was running an outdated version of jQuery. Someone I reached out to via email had an easy fix. Thank you for responding!

[Marchioness · Accepted solution]

For anyone who is facing this problem and stumbles across this thread: our drop-down menu issue was solved by updating the version of jQuery our theme uses. Our theme is pretty old, and we won't let go of it 😬. The solution was changing the jQuery edition numbers this way—

Open your layouts/theme.liquid and find this code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Replace 1.9.1 with 1.12.4 

Thanks to everyone who tried to help!