Image banner with menu overlay? animated header help

Technical Q&A
,

Topic summary

Goal: Place a hero image/banner directly under the announcement bar and have the logo and menu (header) overlay it; possibly use a GIF as the header background.

What’s been tried:

  • Initial advice to add code above in theme.liquid wasn’t applicable (user’s file view didn’t show ).
  • CSS provided to make the sticky header fixed and transparent (sticky-header.header-wrapper { position: fixed; width: 100%; background: transparent; }). Suggested inserting it in theme styles (theme.css/base.css/app.css).

Outcome so far:

  • Header became transparent, but only a blank background shows; the banner does not appear behind/under the header.

Open needs/questions:

  • How to surface the image banner beneath the fixed header (e.g., moving the banner section up, z-index/layering, or setting a header background image/GIF via code in header.liquid or theme settings).
  • Guidance on sourcing a GIF directly in the header section via code.

Next steps:

  • Helper requested the store URL for tailored assistance; the user provided the site link. Further diagnosis and code guidance pending.

Status: Unresolved; awaiting theme-specific instructions after reviewing the live store.

Summarized with AI on December 20. AI used: gpt-5.
1

Hey there, Im having trouble with my image banner. my goal is to display it just under the announcement bar, and have the menu buttons and my logo overlay it in the same postion. Not sure if this would be displayed as image banner or some custom code in the header. cant find a solution online, let me know your thoughts thanks.

In the image you can see I have just an open black space which I want filled in by the image banner.

shopify help.png
shopify help.png1293×418 212 KB

2

@NorthHos , try this

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above
3

My theme.liquid doesnt have this is the closest thing:

NorthHos_0-1725078630871.png
NorthHos_0-1725078630871.png601×563 6.25 KB

4

@NorthHos , try putting this

sticky-header.header-wrapper {
    position: fixed!important;
    width: 100%!important;
    background: transparent!important;
}

here

BSSCommerceB2B_0-1725079428190.png
BSSCommerceB2B_0-1725079428190.png644×558 9.63 KB

It will look like

....
@media screen and (min-width: 750px){
 body {
    font-size: 1.6rem;
 }
}
sticky-header.header-wrapper {
    position: fixed!important;
    width: 100%!important;
    background: transparent!important;
}
{% endstyle %}

If it doesn’t work you can find the file: theme.css or base.css or app.css,… and put it to the end of file

5

The header is transparent, but its just background.

I need to have the image banner display in the header section, or brought up in the header tab without even being an image banner. The question is how would I go about this, and what code would be needed in case I have to source the gif in the header section of the website editior?

NorthHos_0-1725080025467.png
NorthHos_0-1725080025467.png1920×246 79.3 KB

I appreciate the help.

6

@NorthHos , Can you share your url store ? I’ll help you better

7

Yes.

URL:

www.northernhostility.us

PS:

oweofbLInWFNqfwRTGSXZDFVZERSG