Header Scrolling Weirdly

Okay, I’m working on the desktop site here: www.darksbanebooks.com

When I have it at the top, it looks right.


I scroll down exactly once, I get this.

Which is a jumbled mess.

I scroll down once again, and the black header kicks in and goes with me down the page:


which, again looks alright (though I wish it’d bring my rainbow header with it instead).

  1. How can I avoid that first scroll down being a jumbled mess of text overlay? Can the black header kick in earlier? Or can the rainbow header just go with it the whole way?

  2. Can the black header be replaced with an image to keep my rainbow header all the way down the page?

Then

Hello Arshness,

Please try to use the following CSS code in order to add overlay.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

.site-header {
    background-color: rgba(0,0,0,0.5);
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you for responding, Roman.

This doesn’t resolve my issue because it darkens my header image.

Can I just make it so the header image travels down the page instead of turning black?
Can this code be with an image instead of color?

Hello Arshness,

It looks like your issue requires some coding and testing, this goes beyond our support policy. It’s considered advanced customization.

As an option, you can contact Codeable for this kind of service, or find a freelancer on Upwork.

Kind Regards, Roman.

Thanks Roman! I appreciate it!
I’ll figure it out!

You are welcome Arshness,

Thank you for understanding!

Kind Regards, Roman.