Help with Website Header on Homepage - logo turns black when you scroll

Hi,

On my homepage, when you scroll my logo in the header section turns completely black. When you scroll on the other pages on my site, the logo in the header section doesn't turn black. Is there a way to fix the black text in my logo from blending in with the black bar? I have a different version of the logo (with white text that could work too) if there's a way to upload two different logos -- one different on the home page and one different for the other pages. Or could this be solved with a code? 

This is a link to the page on my site here: https://www.aminakahmad.com

Thank you so very much ahead of time. Appreciate ALL the help.

Best,

Amina

First, your job is SO cool. Awesome site. Looks like your menu shrinks on every page on scroll. And the home page is the only page effected with color change on shrink. Did you use CSS to get that header/menu shrink? I did on my site, but the color change is intentional for me. I'm no expert at all, but it seems to me a custom code is the issue. And are you actively working on it now? As I was typing this, it went from changing to black, to changing to this slate gray color instead

@LeauxFi hahahaha thank you so much for the kind words. So I think I figured out how to change the color of the header and the menu bar text in the last hour! And the slate gray (with slight transparency) seems like the winner. I'm still struggling to see if there's a way I can have a different color text logo on the homepage vs the other pages (like I want my logo with white text for the homepage when you scroll but keep the logo with the black text for the rest of the pages) -- I don't know if there's an answer for that 🙃

And nope did not use CSS to get he header / menu shrink! What do you mean by that tho? Would love to see!!!

10 hours ago, aminakahmad said:

@LeauxFi hahahaha thank you so much for the kind words. So I think I figured out how to change the color of the header and the menu bar text in the last hour! And the slate gray (with slight transparency) seems like the winner. I'm still struggling to see if there's a way I can have a different color text logo on the homepage vs the other pages (like I want my logo with white text for the homepage when you scroll but keep the logo with the black text for the rest of the pages) -- I don't know if there's an answer for that 🙃

And nope did not use CSS to get he header / menu shrink! What do you mean by that tho? Would love to see!!!

I mean when you scroll, the size of the menu changes slightly. On my website, I made it so it shrinks a bit and completely inverts from white background & black text, to black background & white text when you scroll. And targeting the header only on one specific page? That goes beyond my knowledge sorry. Maybe @tuanphan the genius knows?

58 minutes ago, LeauxFi said:

I mean when you scroll, the size of the menu changes slightly. On my website, I made it so it shrinks a bit and completely inverts from white background & black text, to black background & white text when you scroll. And targeting the header only on one specific page? That goes beyond my knowledge sorry. Maybe @tuanphan the genius knows?

Oh that is so cool, @LeauxFi! Yeah that would be amazing if possible to do. @tuanphan let me know if you have insight. Would appreciate any or all help. 

So you want

When scroll down, will change

• Header background
• Navigation items color
• Social Icon color/background
• Mobile Icon color

?

@tuanphan Yeah so I'd love to see when you scroll, if I could have the following for my homepage header turn from the current clear to solid black with my "Amina Ahmad logo" -- this logo (see attached) turn into a logo with white text (see also attached) and the navigation items color change from white to black. If you see what it does right now, it takes it from a clear background (with white navigation items color) to a semi-opaque gray background (with white navigation items color).

I also want to note that I'd like to keep logo in the header section on the other pages on my website remain how it looks right now (with black text and the colored A icon).

Website: https://www.aminakahmad.com

Hope that makes sense! And thank you so much in advance.

On 1/25/2024 at 1:42 PM, aminakahmad said:

@tuanphan Yeah so I'd love to see when you scroll, if I could have the following for my homepage header turn from the current clear to solid black with my "Amina Ahmad logo" -- this logo (see attached) turn into a logo with white text (see also attached) and the navigation items color change from white to black. If you see what it does right now, it takes it from a clear background (with white navigation items color) to a semi-opaque gray background (with white navigation items color).

I also want to note that I'd like to keep logo in the header section on the other pages on my website remain how it looks right now (with black text and the colored A icon).

Website: https://www.aminakahmad.com

Hope that makes sense! And thank you so much in advance.

Use this CSS code (for homepage, if you want to apply for other pages, just remove body.homepage)

body.homepage header#header.shrink {
    background-color: black !important;
}
body.homepage header#header.shrink img {
    content: url(https://content.invisioncic.com/p289038/monthly_2024_01/AA-AminaAhmadLogo-FullName_StackedColorWhite.thumb.png.b31f91a834f1d45728a63db8a6f02d56.png);
}