Make header image static

[crosbyaudio]

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.

[TikitaTech]

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!

[crosbyaudio]

Thanks, but where does the code go?

[TikitaTech]

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.

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.

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

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

[crosbyaudio]

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]

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. 

 Let me know if this solves your issue! 

[crosbyaudio]

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

[TikitaTech]

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.

[crosbyaudio]

That seems to work for desktop, but not mobile. 

[TikitaTech]

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

[crosbyaudio]

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