New Shopify Certification now available: Liquid Storefronts for Theme Developers

Dawn. Make image banner show under header. Please help me!

Solved
TheWatchKing
Tourist
7 0 1

So ive been seaching and reading and trying to do this for a good while now. but all the guides even the ones that are only some months old seems outdated. or atleast dosent match or work as intended anymore.

I know and can see this is a common question, but seem like as fast as it gets anwsered shopify updates.

 

So please some one help me getting this done.

Thank you in advance, this community have already helped me learning alot from just reading excisting posts. 

Accepted Solution (1)
Artzen_tech
Shopify Partner
521 105 105

This is an accepted solution.

before

Artzen_tech_1-1696502436201.png

 

 

i am change banner image and use same css  after that

Artzen_tech_0-1696502304800.png

 

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify

View solution in original post

Replies 10 (10)
Millennium3
Shopify Partner
25 0 0

Hi TheWatchKing,

 

I am not entirely sure what you mean by showing the banner under header.
Do you mean the text that is shown on top of the image? Do you want that text to be the header with no background image?

 

If that is what you mean, you could remove the header text from the "header" section and just add a new section above that with the text that you want.

 

If it is not what you mean, please provide some extra detail about what you want so I can try to solve your problem.

 

Kind Regards

TheWatchKing
Tourist
7 0 1

Sorry if i didnt make myself clear, i want my image banner to go behind the header so the image i upload will be behind the the menus in the header.

and not just a white header box with menus

https://g-modz.com/

 

Artzen_tech
Shopify Partner
521 105 105

Hello @TheWatchKing 
Its Artzen Technologies! We will be happy to help you today.


Please send your store url


Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
TheWatchKing
Tourist
7 0 1

https://g-modz.com 

there you go 🙂

Artzen_tech
Shopify Partner
521 105 105

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

Add the following code in the bottom of the file above </body> tag

<style>
sticky-header.header-wrapper.color-background-1.gradient {
    position: absolute;
    width: 100%;
}
</style>
If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
TheWatchKing
Tourist
7 0 1

Sadly no luck, Header is stil a white block over the image banner. Im on dawn 11.0 if that makes any diffence

Artzen_tech
Shopify Partner
521 105 105

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

Add the following code in the bottom of the file above </body> tag

 

use this css instead of first one

 

<style>
sticky-header.header-wrapper.color-background-1.gradient {
    position: absolute;
    background: transparent;
    width: 100%;
}
</style>

banner header is under header you can change your banner image then u see exactly you want

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
TheWatchKing
Tourist
7 0 1

Still no luck. The header is still just a block above the image banner 

Artzen_tech
Shopify Partner
521 105 105

This is an accepted solution.

before

Artzen_tech_1-1696502436201.png

 

 

i am change banner image and use same css  after that

Artzen_tech_0-1696502304800.png

 

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
TheWatchKing
Tourist
7 0 1

WORKS!

I dont know why this did not work on the one in theme library i do tests on. But it straight up worked when i did it on the public one i have going.

Thank you very much! Ive been struggling with this problem for a while now!