My website is https://happyrockgraphics.shop/ and I am having an issue with the mobile version. The menu shows at the top left on mobile and when you click on it, it drops down to show the menu items. I have a few submenus and they are not very full but my collections submenu is very full. It cuts off the bottom few items of the list on mobile. The issue is that since my header is sticky and stays as you scroll for some reason I am unable to scroll the submenu and menu to see the items below. When the menu is selected it only scrolls the website behind the menu. I have searched for hours trying to find a solution that does not require me to limit the items in the menu but I have been unable to find a solution.
Hello @RobertMiddaugh
It is a CSS-related issue. Please try following the steps to resolve the issue.
Step 1: Go to Online Store → Theme → Edit code
Step 2: Open your theme.liquid theme file
Step 3: Paste the below code before
.menu-drawer__menu.list-menu{
height: 500px;
overflow: scroll;
}
As you can see in the screenshot, the above code makes the menu scrollable when the length is too long.
Let me know if need further assistance.
Hello @RobertMiddaugh
It’s GemPages support team and glad to support you today.
You can follow these steps:
- Go to Online Store → Theme → Edit code
- Open your theme.liquid theme file
- Paste below code before :
<style>
@media only screen and (max-width: 990px){
.menu-drawer__inner-container{
height: calc(100vh - 55px);
}
}
</style>
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team