Burger menu (mobile) does not scroll if menu goes past the bottom of the screen (e.g. "Find Parts" on the site https://speco3.fortifydev.com/index.php/en-us/).
The menu being this long also causes similar access problems in laptop & tablet mode.
Staff replied
Templates
unable to see all menu items on manufacturer template burger menu (mobile)
7 replies
Rashida Rahman Staff
Hi there!
Thanks for contacting us.
Please use the following code in your custom CSS:
body.ltr.offcanvs-position-left.offcanvas-active .offcanvas-menu {
overflow-y: scroll;
}Here is all about custom code placement in Helix Ultimate: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta
Hope this helps for your offcanvas!
Best Regards
Scott Asked this
Yes, that fixes the offcanvas(burger menu), but I have a similar problem for long list "Find Parts" menu in laptop mode.
Scott Asked this
What is the fix for the normal dropdown menu (in laptop mode) to see all items in the long menu (e.g. "Find Parts" on the website https://speco3.fortifydev.com/index.php/en-us/)?
Rashida Rahman Staff
Hi Scott,
Sorry for the delay. The following code may work:
body.ltr .sp-megamenu-parent .sp-dropdown.sp-dropdown-main.sp-menu-right {
overflow-y: scroll;
height: 100vh;
}Best Regards
Scott Asked this
No, that code does not work. It scrolls, but not to the end of the list. Also, the scroll bar prevents any sub-menu items to be seen.
Rashida Rahman Staff
Hi Scott,
Apology again.
It is looking good at my end though. However, you may try to use 2 or 3 columns submenu to prevent such situation I think. You will find useful documentation here under the title "How to build advanced Submenu":
https://www.joomshaper.com/documentation/helix-framework/menu-navigation#menu-builder
Best Regards
Scott Asked this
The reference you point to is for mega-menus.
I am not using a mega-menu, just a simple long menu list: "Find Parts" menu item on https://speco3.fortifydev.com/index.php/en-us/
Rashida Rahman Staff
Hi,
Yes, I understand it's not a mega menu but a long menu only. But I was requesting you to consider it as a megamenu to be able to show it with multiple colums, so that it won't be an issue.
However, I have checked it and it was working fine at my end with the code I served you before.
Best Regards
Scott Asked this
It is actually a long menu that contains sub-menus, which won't work with a scroll bar because the sub-menus are hidden behind the scroll bar. A scroll bar in the x-direction is present, but there is no way to scroll to the right and select a sub-menu item at the same time. I modified my menu to not have sub-menus and simply be one long menu, which would work with a scroll bar. I modified your code as follows:
body.ltr .sp-megamenu-parent .sp-dropdown.sp-dropdown-main.sp-menu-right {
overflow-y: auto;
height: 90vh;
}
I selected "auto" for overflow-y because "scroll" placed unnecessary scroll bars on other menu items.
I used "90vh" instead of "100vh" because the full menu wasn't being displayed.
Rashida Rahman Staff
Hi,
Got it! Thanks for the explanation.
In my opinion, still it can be considered as megamenu, so that you could divide it with columns and the sub-menus will also be accessible at the same time.
Best Regards
Log in to reply.