A user implemented custom code to make the filter section sticky on the Motion theme’s collection pages, but this caused the header menu dropdown items to be hidden behind the sticky filter when hovering.
Issue Details:
Solution Provided:
Add CSS code to site-nav.css file:
.site-nav--has-dropdown {
z-index: 99999 !important;
}
This increases the z-index of the dropdown menu to ensure it appears above the sticky filter. The solution was confirmed working with a result screenshot showing the menu properly displaying over the filter section.
I’m using Motion theme’s latest version in that I made the filter section sticky using custom code and that worked but the issue is when we hover on the header menu, it hides the menu items. I’ll attach the reference image. Help me to rectify the issue.
Website: https://u2400w77sbw5tpfb-67925410094.shopifypreview.com
@Opeyemi0012 , Thanks for the timely reply, I need help to resolve this
Hi @Sivadarshan i see it look good, please double check on this
@DaisyVo Please go to any of the collection page and check it
Hi @Sivadarshan
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file site-nav.css and add this code at the end of the file
.site-nav--has-dropdown {
z-index: 99999 !important;
}
Result
Best,
DaisyVo
