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:
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;
}
*/
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!
