Change site header to transparent when scrolling to top of page

Site URL: https://erickanigan.photography/portfolio

I have noticed on a few of my site pages that when I scroll to the top, the entire header shows a black background behind the page titles. I am hoping to change this feature to transparent, as the black background for the header makes my black logo/text invisible when scrolling to the top of the page. I have linked one of the pages in which this occurs. If you scroll as far down as possible and then back up to the top, you will see the header with the black background appear temporarily. The sub pages from the link also are showing the same black background. Any help on converting this to a transparent background for the header would be appreciated!

On 5/31/2021 at 1:12 PM, ed0304 said:

Site URL: https://erickanigan.photography/portfolio

I have noticed on a few of my site pages that when I scroll to the top, the entire header shows a black background behind the page titles. I am hoping to change this feature to transparent, as the black background for the header makes my black logo/text invisible when scrolling to the top of the page. I have linked one of the pages in which this occurs. If you scroll as far down as possible and then back up to the top, you will see the header with the black background appear temporarily. The sub pages from the link also are showing the same black background. Any help on converting this to a transparent background for the header would be appreciated!

 

Try adding to Design > Custom CSS

header#header {
    background: transparent !important;
}

On 6/1/2021 at 10:45 AM, tuanphan said:

Try adding to Design > Custom CSS

header#header {
    background: transparent !important;
}

 

Wow- that did the trick! Thank you so much for your help!

@tuanphan.  How do I make it so that the background border shows at say 20px but the site links still remain at 100% visibility.

On 4/4/2024 at 8:42 PM, MoeCritiques said:

@tuanphan.  How do I make it so that the background border shows at say 20px but the site links still remain at 100% visibility.

You mean show 20px border under header?