How can I add an image banner to my website header?

[JasonBoyd]

Hello,

Can someone help me with my header please. I would like to have an image banner contained within the header under the navigation bar so that it is persistent on each page and is treated the same as a brand logo is within the header (takes you back to the home page). 

I would like it to look like this:

Little Shop of Curiosity 

password: curious

The image is inside an image banner but outside the header currently.

Thank you in advance. 

[BSS-Commerce · Accepted solution]

Hi @JasonBoyd 

We would like to suggest you a solution below:

- Step 1: Go to Admin => Online Store => Theme => Edit Code:

- Step 2: Find the file header.liduid and insert the following code after the closing tag of the header tag:

<div width="100%" >
     <img src="{{ 'abstract-website-banner-with-modern-shapes_1361-1738.png'|asset_url }}" alt="Banner_Img"style="height:300px;object-fit:cover;width:100%">
 </div> 

- Step 3: Save it and you're done. Note your CSS properties can be custom inline in the IMG tag. The image URL link can be an online link or an image upload link to Shopify admin.

You can go to Assets => download the file and link it as follows (The red link part is the name of the file uploaded to the assets folder):

I hope that it will work for you.

[JasonBoyd]

Thank you very much, that did the trick. One thing though, is it possible to make the image not sticky with the rest of the header?

[BSS-Commerce]

Hi @JasonBoyd 

To make the image not sticky with other header components, instead of inserting the code into the header.liquid file, you can look into the theme.liquid file. Then, find the code with the "id="MainContent" and insert the code:

      '<div width="100%" >
           <img src="{{ 'abstract-website-banner-with-modern-shapes_1361-1738.png'|asset_url }}" alt="Banner_Img"style="height:300px;object-fit:cover;width:100%">
      </div>'

You will get a result like this:

I hope that it's useful for you.

[NorthHos]

please let us know how to get the header to go all the way to the top of the screen or just under the announcement bar, My header is a big black block that ends just below the navigation bar its super ugly. I want to push my image banner up as much as possible and have my menu buttons and logo overlay the banner.

[thebowbar]

Hi, how do you make it so that the image goes behind the navigation bar rather than directly below it? 

[help8]

how do you make it so that the image goes behind the navigation bar rather than directly below it?