Submenus won't scoll on empire theme

Technical Q&A
, ,
1

Hey Y’all.

We run the empire theme on our website (NJKayaks.com) We can’t scroll through submenus (Accessories>Shop by Brand, or Accessories>Shop by Type) on desktop/mac. It works fine on mobile. I’ve seen fixes for other themes, but I’m a little confused on if they are a theme specific fix, or where to put them if it isn’t. Any help would be greatly appreciated. Thanks and happy new year!

Scott

2

@NJKayaks what happening is when you try to scroll down, your header gets fixed at top and while doing it , it is firing an event which hides desktop menu and converts it into mobile one. And therefore other submenus are also hidden, you have to stop menu from getting converted to mobile on desktop

3

Hey @NJKayaks

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (min-width: 768px) {
ul.navmenu.navmenu-depth-3.navmenu-submenu {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    min-width: 1000px !important;
}
}
</style>

RESULT:

image
image1896×731 165 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

4

Thank you so much! This worked perfectly! You’re the best!

5

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.