Make header image static

Make header image static

crosbyaudio
Excursionist
25 0 8

Looking to make the wood header image static. Currently the image moves when you scroll up and down. This is more noticeable on mobile.

 

https://crosbyaudio.com

 

Thanks.

Replies 10 (10)

TikitaTech
Shopify Partner
35 7 9

Hi @crosbyaudio!

It looks like the header section is set to sticky, which is causing it to move as you scroll.

 

 

.section-header {
    position: sticky;
    margin-bottom: 0px;
  }

 

 

Changing the position to static should solve the issue and keep it in place.

 

.section-header {
    position: static;
    margin-bottom: 0px;
  }

 

Let me know if you need any further details or run into any issues!

Hope this helps!

Tell me your problem - I want to solve it!
crosbyaudio
Excursionist
25 0 8

Thanks, but where does the code go?

TikitaTech
Shopify Partner
35 7 9

Ah, sorry about that!

In the Admin area, go to the Header section of your site, and scroll to the bottom to add the new code in the Custom CSS.

2024-10-10T10_21_35,596373266+07_00.png

 

 

2024-10-10T10_11_36,181786852+07_00.png

 

 

 

 

Alternatively, there’s another method that doesn’t require Custom CSS! Currently, your header is set to 'Sticky on scroll up.' You can find this option on the same Header page in Admin.

2024-10-10T10_12_25,986137709+07_00.png

 

If you change this setting to 'None,' it will revert to the default positioning, which is static.

 

2024-10-10T10_14_38,807076020+07_00.png

 

I’ve tested both methods, and either should solve your problem. Hope this helps!

 

 

Tell me your problem - I want to solve it!
crosbyaudio
Excursionist
25 0 8

Thanks, but I think you misunderstood my issue. I want to stop the wood background from moving when you scroll up and down. Please see the screen recording below.

 

https://youtu.be/jtwKd1lIU_w

TikitaTech
Shopify Partner
35 7 9

Hi @crosbyaudio, if you set 'sticky header' (in Admin, same area as before) to 'always', the header will not move, despite scrolling up and down. 

2024-10-11T11_20_15,627480639+07_00.png

 Let me know if this solves your issue! 

Tell me your problem - I want to solve it!
crosbyaudio
Excursionist
25 0 8

Sorry, still not the issue I'm having. It's clear what the problem is in the video, but thanks for trying.

TikitaTech
Shopify Partner
35 7 9

That's my bad, I completely misunderstood. 

I tested this CSS on .head-wrapper, changing background-attachment from 'fixed' to 'scroll'.

 

.head-wrapper {
  background-attachment: scroll;
}

 

This stopped the image from moving.

https://youtu.be/2BFVnIGAhuM 

 

This can be added to Admin => Header => Custom CSS.

Tell me your problem - I want to solve it!
crosbyaudio
Excursionist
25 0 8

That seems to work for desktop, but not mobile. 

TikitaTech
Shopify Partner
35 7 9

That's unusual - it's working on mobile when I test it. Could you give me more details?

Tell me your problem - I want to solve it!
crosbyaudio
Excursionist
25 0 8

The wood image still moves when you scroll up and down. The image needs to be static.