The image banner is overlapping the header on my homepage and shopify help have stated I need to do some custom coding to rectify. Can anybody help? Twistedtreebrewery.com
Topic summary
A Shopify store owner encountered a header overlapping issue with their homepage banner, specifically affecting the mobile version of their site (twistedtreebrewery.com). Desktop display appeared normal.
Solutions Provided:
- CSS approach: Add custom code to the
base.cssfile targeting the banner box element with a 70px top margin - Alternative method: Insert CSS code in the
theme.liquidfile before the closing</head>tag
Both solutions involved adding custom CSS to create spacing between the header and banner elements on mobile devices.
Resolution: The issue was successfully resolved using one of the provided CSS fixes. The thread is now closed with the problem solved.
Hi @Twistedtreebr i see it’s normal. Please double check on this
Sorry I should have mentioned it is only on the mobile version.
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
.banner__box.content-container.content-container--full-width-mobile.color-scheme-4.gradient {
margin-top: 70px !important;
}
Result:
Best,
Liz
1 Like
- Go to Online Store → Theme → Edit code.
- Open your theme.liquid file
- In theme.liquid, paste the below code before
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Amazing all sorted now thanks so much for your help!
