Customise Header

Shopify Discussion
1

Hi All!

I need some help with the header on the website, we have added the below code to allow us to customise it so there is a flow with the website:
@media screen and (min-width: 490px) {header.header {background:url(“https://cdn.shopify.com/s/files/1/0617/4549/6150/files/Background.png”) no-repeat; background-size: 100%;}footer.footer {background: url(“https://cdn.shopify.com/s/files/1/0617/4549/6150/files/Background.png”) no-repeat; background-size: 100%;}}

But what we are now encountering an issue which shows below when the website to accessed by different screen size’s.

This is what is showing when you open the website on a normal desktop (screenshot below)

Screen Shot 2024-12-09 at 12.19.12 pm.png
Screen Shot 2024-12-09 at 12.19.12 pm.png2482×542 197 KB

But we would love to have the website viewing as (screenshot below)

Screen Shot 2024-12-09 at 12.20.33 pm.png
Screen Shot 2024-12-09 at 12.20.33 pm.png2498×1076 445 KB

Any help would be greatly appreciated :slightly_smiling_face:

2

Hi @Vaultofthecards

Could you share your store link so I can check?

3

@Vaultofthecards
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.

4

Hi @Vaultofthecards

Please try to update your code to this and check again

@media (min-width: 490px) {
header, footer { 
 max-width: 100% !important; 
}
header.header { 
 background:url("https://cdn.shopify.com/s/files/1/0617/4549/6150/files/Background.png") no-repeat; background-size: 100%;
}
footer.footer {
 background: url("https://cdn.shopify.com/s/files/1/0617/4549/6150/files/Background.png") no-repeat; background-size: 100%;
}
}
5

Hi @Vaultofthecards

I hope you are well.

Would you mind sharing store link and entry password so we can check and provide you with a suitable customization code for that request?

Looking forward to hearing from you soon. Thank you!

Best,

Daisy - Avada Support Team.

6

Our URL is https://vaultofthecards.com.au/
Password is: yeutsu

We want to website to flow so the header and the slideshow match when the slideshow doesn’t go between slides
But now when zoomed in or out it doesn’t match

7

Thank you so much that has worked !!!

But we want to website to flow so the header and the slideshow match when the slideshow doesn’t go between slides
But now when zoomed in or out it doesn’t match (we want the header image to be still)

Can you provide anything else that would assist?

8

Our URL is https://vaultofthecards.com.au/
Password is: yeutsu

We want to website to flow so the header and the slideshow match when the slideshow doesn’t go between slides
But now when zoomed in or out it doesn’t match(we want the header image to be still)

9

Hi @Vaultofthecards

Thank you for sharing it.

Your header has a fixed height, while the slider dynamically adjusts its width as you scroll through images. This mismatch makes it impossible to perfectly align the header and the slider images.

Hope you can kindly understand. Thank you!

Best,

Daisy - Avada Support Team.

10

Hi Daisy,

Thank you so much for explaining :grin:
Ill see what else we might use for our background to make it flow better