Hi there!

Sorry for your issue.

You can try the following code snippet in your custom CSS:

.sp-dropdown-sub .sp-dropdown-items{
    max-height: 300px;
    overflow: scroll;   
}

Note: Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Best Regards

No this is horrible looking! It applies scroll bars which are very bad looking. Even the max height is not what I wished for. Just to be able to scroll while using the mouse wheel when on top of the menu item; this is what I wished for. Please advise accordingly!

Thank you

Hello,

Sorry to hear that. Actually, it is happening because the sub menu list is longer than the window height, and the header is sticky.

So I have another idea, you can try to split your submenu items in columns with the help of megamenu feature.

The following doc may help you to do this:

https://www.joomshaper.com/documentation/helix-framework/helix-ultimate-2/menu-navigation#menu-builder

Best Regards

I followed the instructions for the mega menu, I apply the changes but I can't see any changes taking place. Can you please advise.

PS: I think this megamenu is very much unreliable in editing settings, width etc. It should be scrollabe at least or even by self-adjusting according to height of screen. I am pretty sure there is no solution to this buggy menu.

I have spent more than 5 hours trying to figure this out. There seems to be a problem with the j2store product view, it just overrides whatever columns I create with megamenu editor in Helix. At the end, only one column is applied. Cached cleaned etc but no luck. Also a big problem has to do with the fact that the megamenu column option is available only for menu level 2 items and not deeper. THIS IS A PROBLEM!!!! Please advise me accordingly. Visitors of the website complain about not being able to access the full menus exploration.

Seems that the shaper temlates overrides the helix framework?

Also a big problem has to do with the fact that the megamenu column option is available only for menu level 2

Hi. Main concept of megamenu works so everywhere, not only in Helix - only "2 level" but not deeper. This is its meaning. "2 level" of megamenu is not a real menu level, but is just a container where you can place any content.

You must build it on the basis of this concept.

Still I can't see it working. Please watch the video below: https://www.dropbox.com/s/5ad5wl8cwjdlzek/Helix%20Ultimate%20Framework%20and%2014%20more%20pages%20-%20Personal%20-%20Microsoft%E2%80%8B%20Edge.wmv?dl=0

At 1:28 you can see me applying AND previewing multi column view. After I save successfully, you will se at 2:31 that NO change takes place. What is wrong?

And to just put thinks in some context:

1. My main problem is that the menu isn't scrollable by default.
2. I need to place custom css that has a bad looking, old fashioned scroll bar instead of a thin and modern one
3. It also applies scroll bar to the horizontal axis which is 100% unnecessary.
4. It also applies the scroll bar (with no actual effect, the scroll bar has no interaction) even when the height of the submenu is less than the max-height! Insane! (picture 1)
5. The part at the low end is hidden behind the windows bar at the bottom (picture 2)
6. Of course all these happens bacause there is NO WAY to have the submenu expand the inherent menu items in COLUMNS. It happens only for max level 2! Why? God knows why... This is unworkable of e-shops (hello we are living in 2022, the era of e-shops especially after the COVID-19 change of habits).
7. Enough said, this is completely unworkable.

I need to place custom css that has a bad looking, old fashioned scroll bar instead of a thin and modern one

By default, not exist "fine and modern" scroll bar. This can be configured by your hand only, via CSS or JavaScript. Here is css snippet for scroll bar, that you can set as you like. Replace "your-scroll-block-class" to your own. It is so much code, because for different browsers it is configured in different ways.

.your-scroll-block-class {
    scrollbar-color: #8643b7 #eee;
    scrollbar-width: thin;
}

.your-scroll-block-class::-webkit-scrollbar {
    background-color: #eee;
}

.your-scroll-block-class::-webkit-scrollbar-thumb {
    background-color: #8643b7;
}

.your-scroll-block-class::-webkit-scrollbar-thumb:hover {
    background-color: #ad61e4;
}

.your-scroll-block-class::-webkit-scrollbar {
    width: 8px;
}

.your-scroll-block-class::-webkit-scrollbar-button:vertical:start:decrement {
    background: linear-gradient(120deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(240deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(0deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #ffffff;
}

.your-scroll-block-class::-webkit-scrollbar-button:vertical:end:increment {
    background:
        linear-gradient(300deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(60deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #ffffff;
}

.your-scroll-block-class::-webkit-scrollbar-button:horizontal:start:decrement {
    background:
        linear-gradient(30deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(150deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(270deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #ffffff;
}

.your-scroll-block-class::-webkit-scrollbar-button:horizontal:end:increment {
    background:
        linear-gradient(210deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(330deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(90deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #ffffff;
}

It makes such scroll bar

It also applies scroll bar to the horizontal axis which is 100% unnecessary. It also applies the scroll bar (with no actual effect, the scroll bar has no interaction) even when the height of the submenu is less than the max-height! Insane!

Try this code instead of previus

.sp-dropdown-sub .sp-dropdown-items{
    max-height: 300px;
    overflow-y: auto;  
}

Looking at your menu as a whole, I think you must redistribute it on another menus, and not do everything in one menu. Check out examples of well-known online stores. You will not see there such nesting as you have. Because it contradicts usability, user convenience and screens size. Typically, different sections are redistributed to different menus.

You need to increase your UX design skills. Or see some lessons about UX design.

Classic scheme for online store and any catalog

At 1:28 you can see me applying AND previewing multi column view. After I save successfully, you will se at 2:31 that NO change takes place. What is wrong?

Sorry. I'm not support team member. To find a reason need access to your site

Thank you for the reply.

1. I resorted to some custom scroll bar plugin to make things more modern looking.
2. Can you please forward the multi-column problem to a real support team member?

Can you please forward the multi-column problem to a real support team member?

No I can't. I'm just user. Wait for the answer here

Ok I undestand, I thought you were on paid mission here. Thanks anyway for your support. The support team hasn't responded yet :(

It's really crazy, there is no way to have the features of helix megamenu in shopin template megamenu! Just crazy!

Can I apply the scroll feature to specific menus I chose?

Hi,

Sorry for the delay.

You can add a class name in your menu item and use the class in your code.

Best Regards