Hi! I’m really enjoying my Shrinepro theme however there’s a problem with Mega Menu. It gets cut off in the bottom left and bottom right. Preview for theme:
https://6a1h21las3bg52hz-68501045494.shopifypreview.com
Image below for reference:
Topic summary
A Shrine Pro theme user reports that their Mega Menu is being cut off at the bottom left and right corners, with content underneath (like the Hero Slider) showing through.
Proposed Solution:
A CSS fix was suggested involving adding code to the theme’s CSS file:
- Set
.products-mega-menu__bodytooverflow: hidden - Set
.products-mega-menu__containertoheight: 50vh
Ongoing Issues:
- The initial poster tried the solution but reports the menu still cuts off and doesn’t cover the full screen
- A new problem emerged: the menu no longer closes automatically when hovering away, creating poor user experience
- The menu remains open instead of closing on its own
Status: Unresolved. Another user has chimed in experiencing the same issue, and no working solution has been confirmed yet.
1 Like
Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.products-mega-menu__body {
overflow: hidden;
}
.products-mega-menu__container {
height: 50vh;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you so much for answer. But the menu is still cutting off. I want it to cover whole screen. As you can see, the Hero Slider is displaying which is annoying.
Nvm, i did that but the menu doesn’t close off on its own 
The menu is not closing when i hover away from it. It keeps open which is bad UX. Is there anyway i can fix it?
Did you find a solution? Having the same problem here.