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

jesustg22
Tourist
5 0 1

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)

 

 

Replies 16 (16)

namphan
Shopify Partner
194 28 43

Hi @jesustg22,

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

Shopify Development Service

namphan
Shopify Partner
194 28 43

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!

Shopify Development Service
jesustg22
Tourist
5 0 1

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
Shopify Partner
194 28 43

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;
}
Shopify Development Service
jesustg22
Tourist
5 0 1

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

namphan
Shopify Partner
194 28 43

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;
}
Shopify Development Service
jesustg22
Tourist
5 0 1

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

namphan
Shopify Partner
194 28 43

Hi @jesustg22,

Can you send me a screenshot of the error?

Shopify Development Service
namphan
Shopify Partner
194 28 43

Hi @jesustg22,

Please remove code:

Screenshot.png

And add code:

@media screen and (max-width: 749px) {
.banner--mobile-bottom .banner__media {
    height: 55rem;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
}
Shopify Development Service
namphan
Shopify Partner
194 28 43

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;
}
}
Shopify Development Service
jesustg22
Tourist
5 0 1

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

namphan
Shopify Partner
194 28 43

Hi @jesustg22,

Please add code:

.slideshow__text.banner__box {
    background: transparent !important;
}
Shopify Development Service
zeeek
Visitor
1 0 0

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
Shopify Partner
194 28 43

Hi @zeeek,

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

Shopify Development Service
WaggerzPE
Visitor
1 0 0

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

namphan
Shopify Partner
194 28 43

Hi @WaggerzPE,

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

Shopify Development Service