Issue with header overlapping banner/text on home screen help!

Store Design
, ,
1

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

2

Hi @Twistedtreebr i see it’s normal. Please double check on this

LizHoang_0-1739966943668.png
LizHoang_0-1739966943668.png1920×577 127 KB

3

Sorry I should have mentioned it is only on the mobile version.

4

Hi @Twistedtreebr

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:

LizHoang_1-1739967367857.png
LizHoang_1-1739967367857.png462×616 102 KB

Best,

Liz

5

Hi @Twistedtreebr

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

6

Amazing all sorted now thanks so much for your help!

7

Hi! I have the same issue on my mobile page as well. I’ve posted the initial code at the end of base.css, but the code you listed here doesn’t show up. The image banner and header are totally overlapped on mobile. It is also overlapped on the desktop page, but it’s worse on mobile.

image
image303×260 33.4 KB