A user encountered an issue where their mega menu overlaps the search bar when searching for products. They are using two plugins: BuddhaApps for custom menus and Shopify Search and Discovery for search functionality.
Diagnosis:
Another user identified that the overlapping menu is caused by a z-index conflict.
Solution Provided:
A CSS fix was shared to resolve the issue by adjusting the z-index property. The code should be added to the bottom of the assets/base.css file:
@media screen and (min-width: 990px) {
.header--top-center .header__inline-menu {
z-index: 2;
}
}
Outcome:
The original poster confirmed the solution worked and thanked the helper. The issue appears to be resolved.
Hi everyone, Need some help. When I use the search bar to find a product, the menu overlaps. I’m using 2 plugins ,for custom menus, buddhaapps, and for search, shopify search and discovery. I think one of them is causing the overlapping menu.
You can check it.
https://sobo-pk.myshopify.com/
PW: MD1155
Thanks in advance.
Please add the following CSS code to your assets/base.css bottom of the file.
@media screen and (min-width: 990px){
.header--top-center .header__inline-menu {z-index: 2;}
}
Thanks!
Thank you so much @dmwwebartisan