A user implemented custom code to make a hero image overlap with the header on their Shopify store. While this worked as intended on desktop, it created an unwanted issue on mobile: the hero image now appears in the background when the mobile menu is opened.
Desired outcome:
Solution provided:
A CSS fix was offered involving three steps:
position: initial !importantStatus: The original poster confirmed the solution worked and thanked the responder. The issue appears resolved.
I added some code to make my hero image overlap with the header, and it worked, just what I wanted. But now on mobile view the hero image can be seen in the header area when the option menu is opened which I dont want. I just want my logo to show and have the same background as the rest of the option menu. Any and all help is appreciated, thank you!
(How it looks now ^)
(How I want it to look) ^
Store: https://bb9f8c-ac.myshopify.com/
Pass: pongia
hi @JordiP
I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!
Step 1: Go to Admin → Online store → Theme > Edit code:
:Step 2: Search for the file base.css
put this code in the end
header.header.header--middle-center.header--mobile-center:has(.menu-opening) {
position: initial !important
}
Step 3: Save and reload home page.
=>> The result:
Product page:
We hope my suggestions will solved your issue.
If it is helpful, can you kindly give us many likes and mark the solution for us?
This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.
Have a nice day, sir!
Thank you!
