Transparent header changing to white when hovering or scrolling down & font change (white to black)

[jesustg22]

Hi, new to this! And unfortunately with very little knowledge on css or code editing. Just learning the basics.

The site I have built so far is d51002-4.myshopify.com and I can share the password privately if anyone can help me with the below:

I am struggling to make the current transparent header in the Home page automatically change to white when hovering over it as well as when scrolling down. When the header is transparent the font should be white and the font should be black when the header goes from transparent to white.

To make the header transparent I pasted some code I found in another thread but the slides' banner are not transparent in the mobile version, only in desktop, so help with this would be appreciated too. This slides banner does not show the slide dots either :S

At the same time, I would like the existing announcement bar to remain in the existing color but to expand across the whole width of the page! There seems to be a gap now.

A beautiful website of reference for this that another user has previously shared is https://scarlettgrae.com/ ( this one displays a video and not a slideshow but the header works as I inted it to do)

[namphan]

Hi @jesustg22,

Please send me the password, I will help you check it

[namphan]

Hi @jesustg22,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.header-wrapper {
	border-bottom-color: #fff;
}
.header__icon,
.header__menu-item,
.localization-selector.link {
    color: #fff;
}

.scrolled-past-header .header-wrapper,
.header-wrapper:hover {
    background: #fff !important;
}

.scrolled-past-header .header-wrapper .header__icon,
.scrolled-past-header .header-wrapper .header__menu-item,
.scrolled-past-header .header-wrapper .localization-selector.link,
.header-wrapper:hover .header__icon,
.header-wrapper:hover .header__menu-item,
.header-wrapper:hover .localization-selector.link {
    color: #000;
}

Hope it helps!

[jesustg22]

hi @namphan many thanks! In the mobile version the banner of the slideshow is still as white and not transparent. What is missing?

Also, how can we make the announcement bar on top to be thinner and to match the width of the page on mobile and desktop?

[namphan]

Hi @jesustg22,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.announcement-bar-section {
    height: auto !important;
    background: #bfd6c9 !important;
}
.announcement-bar-section .utility-bar {
    background: #bfd6c9 !important;
}

[jesustg22]

thank you @namphan but in mobile the slideshow banner is still white. What can i Change in the code so it is transparent?

[namphan]

Hi @jesustg22,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.slideshow__text .banner__heading {
    color: #000 !important;
}

[jesustg22]

Sadly still not working for mobile. Maybe I added some wrong code somewhere?

[namphan]

Hi @jesustg22,

Can you send me a screenshot of the error?

[namphan]

Hi @jesustg22,

Please remove code:

And add code:

@media screen and (max-width: 749px) {
.banner--mobile-bottom .banner__media {
    height: 55rem;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
}

[namphan]

Hi @jesustg22,

Please change code:

@media screen and (max-width: 749px) {
.banner--mobile-bottom .banner__media {
    height: 55rem !important;
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100%;
}
.banner--mobile-bottom .slideshow__text-wrapper {
    height: 55rem !important;
}
}

[jesustg22]

namphan, unfortunately now I see it transparent in mobile but NOT transparent in desktop 

[namphan]

Hi @jesustg22,

Please add code:

.slideshow__text.banner__box {
    background: transparent !important;
}

[zeeek]

Hi @namphan 
I am facing the same issue on my shopify store, can you please help me out as well? 
I want the same on-hover animation as @jesustg22 . 

[namphan]

Hi @zeeek,

Can you describe your problem more clearly and send me the site link if possible, I will check it in detail

[WaggerzPE]

This helped me! However, I have a white line between the the Headers Section and the next section. Any advice? 

[namphan]

Hi @WaggerzPE,

Please send me the store link, I will check it in detail for you

[Crown-of-Thorns]

The desktop version of my announcement bar and header is exactly what I want it to look like. But on the mobile, the announcement bar is transparent, and the bar turns black and not white. I don't know why?

[rohitDTX_3767]

hello sir how i add this website same header in my theme  https://www.bulgari.com/