How to make text + icon white and change back to default after scrolling in header

[Lisavdijk]

Dear all,

I've a custom header on home page when it's not scrolled, it's transparent, but when you scroll it's with white background.

Now I've added language selector (custom one from an app) and I want to change the text color to white when it's not scrolled, and back to default when it's scrolled.

I managed to do this, but it's doing it for all pages, I only want this in homepage.

So when it's not scrolled I want this to white (only in homepage)

also border color please.

Website: https://b6c7e8-65.myshopify.com/

Pass: test

Appreciate your help in advance,

Kind regards,

Lisa,

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Lisavdijk 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.scrolled-past-header span.tl-label.tl-code {
    color: black !important;
}
span.tl-label.tl-code {
    color: white;
}
.tl-select:after {
    border-color: white;
}
.scrolled-past-header .tl-select:after {
    border-color: black !important;
}
</style>

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSS-TekLabs · Accepted solution]

{% if template.name == "index" %}
<style>
.scrolled-past-header span.tl-label.tl-code {
    color: black !important;
}
span.tl-label.tl-code {
    color: white;
}
.tl-select:after {
    border-color: white !important;
}
.scrolled-past-header .tl-select:after {
    border-color: black !important;
}
</style>
{% endif %}

[BSS-TekLabs · Accepted solution]

Please try this code @Lisavdijk 

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Lisavdijk 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.scrolled-past-header span.tl-label.tl-code {
    color: black !important;
}
span.tl-label.tl-code {
    color: white;
}
.tl-select:after {
    border-color: white;
}
.scrolled-past-header .tl-select:after {
    border-color: black !important;
}
</style>

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Lisavdijk]

Hi Teklabs,

Do you have a code that this only works in homepage, and not other pages?

also the arrow keeps black on me with your code, see picture below,

Thank you in advance,

[BSS-TekLabs · Accepted solution]

{% if template.name == "index" %}
<style>
.scrolled-past-header span.tl-label.tl-code {
    color: black !important;
}
span.tl-label.tl-code {
    color: white;
}
.tl-select:after {
    border-color: white !important;
}
.scrolled-past-header .tl-select:after {
    border-color: black !important;
}
</style>
{% endif %}

[BSS-TekLabs · Accepted solution]

Please try this code @Lisavdijk 

[Lisavdijk]

another question, is it possible to put this country selector more to right on mobile?

it's close to the logo, but i want to keep logo in center

[BSS-TekLabs · Accepted solution]

<style>
@media screen and (max-width: 989px) {
    body .header {
        padding-right: 1rem !important;
    }
}
</style>

Can you try add more this code 

[Lisavdijk]

Hi Teklabs,

thank you once again, this also worked out perfectly 🙂

appreciate your great support.

Kind regards,

Lisa,

[Lisavdijk]

Hi Teklabs,

Many thanks, changed a bit to make it smoother upon scrolling and with my OCD level

but your code worked perfectly, appreciate your help with that.

{% if template.name == "index" %}
<style>
/* White Text*/
span.tl-label.tl-code {
    color: #c4c2c2 !important;
    transition: color 0.3s ease;
}
/* White Arrow*/
.tl-select:after {
    border-color: #c4c2c2 !important;
    transition: border-color 0.3s ease;
}
/* White Border*/
.tl-select {
  border: 1px solid #c4c2c2 !important;
  transition: border 0.3s ease;
}

  
/* Black Text*/
.scrolled-past-header span.tl-label.tl-code {
    color: #5C5C5C !important;
    transition: color 0.3s ease;
}
/* Black Arrow*/
.scrolled-past-header .tl-select:after {
    border-color: #5C5C5C !important;
    transition: border-color 0.3s ease;
}    
/* Black border*/
.scrolled-past-header .tl-select {
  border: 1px solid #c4c2c2 !important;
  transition: border 0.3s ease;
} 
</style>
{% endif %}

Thank you for your time and support 🙂

[devcoders]

Hi @Lisavdijk 

- Go to Online Store -> Theme -> Edit code.
- Find the file base.css and paste the code below at the bottom of the file.

.tl-switcher.tl-language .tl-select {
background: white!important;
}