The megamenu is sticking when we srcoll, can someone tell me how we get it to stay at the top?
https://www.loom.com/share/235c342d137840dca4fbd3f70ff6ef90?sid=a6d024da-e7a9-4e9e-96ae-a2dc27f4b2cd
Also the underline effect is making elements move:
Topic summary
A Shopify store owner is experiencing two CSS issues with their megamenu on physioworldshop.co.uk:
Primary Issue:
- The megamenu is sticking/becoming fixed when scrolling down the page
- They want it to remain static at the top instead
- Video demonstration provided via Loom
Secondary Issue:
- An underline hover effect is causing layout elements to shift/move
- Also documented with a separate Loom video
Attempted Solution:
- One user suggested CSS code using
position: fixedwithtop: 0and high z-index - The original poster confirmed this solution did not resolve the problem
Status: Unresolved - the issue persists and requires further troubleshooting of the CSS/Liquid code controlling the megamenu behavior.
hi @ChrisW3
Try adding the following CSS to ensure it stays fixed at the top:
.megamenu-container {
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
Thanks for your response, unfortunately that didn’t do anything as far as I can see