How can I overlap the header and hero banner on my homepage?

Store Design
,

Topic summary

A user seeks help overlapping their transparent header with the homepage hero banner on both desktop and mobile. They want to avoid repeatedly fixing the image in the backend when making changes.

Solution provided:

  • Add custom CSS to base.css file via Theme Editor
  • Apply negative top margin (-70px desktop, -55px mobile) to the hero section
  • Target specific section ID for the banner element

Additional customization:

  • If header is sticky, add background color on scroll using .shopify-section-header-sticky:not(.shopify-section-header-hidden) selector
  • Adjust background color value (currently “black”) as needed

The solution involves theme code editing and includes both desktop and mobile responsive breakpoints.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Hello, I cannot figure out how to overlap the header and hero banner on the homepage. The header is already transparent from some code i implemented a while ago. I would need this for both mobile and desktop and preferably be able to change the image without having to continuously fix it in backend. Any help is greatly appreciated. Thankyou!!

My site:

Krstlbrand.com

1 Like
2

Hey @SAMMYKRSTL

Step 1: Go to Online Store → Theme → Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save

section#shopify-section-template--15979144675525__76675ad2-2b1a-4dee-8401-0f4bed1d673b {
    margin-top: -70px;
}

@media screen and (max-width: 989px){
    section#shopify-section-template--15979144675525__76675ad2-2b1a-4dee-8401-0f4bed1d673b {margin-top: -55px;}
}

If you need to add background color when scroll down and header is sticky then please add below code as well

#shopify-section-header.shopify-section-header-sticky:not(.shopify-section-header-hidden){    background-color: black;}

Note: Please change “black” to as per your requirements.

Let me know if you need help.

1 Like