Dropdown Menu with Overflow stops Hovering

M0w45
Excursionist
37 0 6

Hi there,

I'm facing a little code issue that's been driving me crazy for the last few days. I spent a lot of time browsing forums and trying to make it work myself with no luck, so I'm hoping someone can help me here 😕

One tab of my main navigation ("Shop By Category") is listing quite long, and on regular-size screens, you can't see the end of the list. If you scroll down, it will scroll down the page instead of the menu list. Here is the URL of my store to give you a better idea: https://orka.ca/, and see screenshot below:

Nav-Menu-No-Overflow.png

 

I was able to tweak my css file with the Max-Height and Overflow-Y properties to make the menu list scrollable instead of the page content.

.site-navigation .navmenu-depth-2 {
    max-height: 60vh !important;
  	overflow-y: scroll !important;
/* Hide scrollbar for IE and Edge */
        /*-ms-overflow-style: none; */
  	/*scrollbar-width: none; */
  }
/* Hide scrollbar for Chrome */
/*  .site-navigation .navmenu-depth-2::-webkit-scrollbar {
    display: none; 
  }
*/

 

Nav-Menu-OverflowY-HoverNotWorking.png

 

However, this is also somehow "disabling" my hover property and I can't seem to display and access my level-2 menu list (as shown on 1st screenshot).

If anyone ever run into this situation, please let me know how you were able to fix it as this is really annoying and negatively impacting my UX. 

Thank you! 

Replies 2 (2)

Ninthony
Shopify Partner
2329 350 1023

Your shop by category menu appears as a megamenu for me, not like the image you show. Also it scrolls just fine:

Ninthony_0-1631913353243.png

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
M0w45
Excursionist
37 0 6

Hi @Ninthony ,

Thank you for your quick reply. 

I'm sorry I switched the live theme to a mega menu to improve UX, but I think it does take a lot of space on the screen, especially on the 13-15" screens.

This is the preview link for my other theme update with the dropdown menu issue I describe earlier: https://orka.ca/?_ab=0&_fd=0&_sc=1&preview_theme_id=120538300521

Please let me know if you have any thoughts on how to make it work.

Thank you so much!