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

Store Design
,
1

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)

Lisavdijk_0-1728135814429.png
Lisavdijk_0-1728135814429.png833×100 40.3 KB

also border color please.

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

Pass: test

Appreciate your help in advance,

Kind regards,

Lisa,

2
  • 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 and press ‘Save’ to save it
3
  • Here is the result you will achieve:

BSSTekLabs_0-1728136471862.png
BSSTekLabs_0-1728136471862.png819×210 75.6 KB

BSSTekLabs_1-1728136478431.png
BSSTekLabs_1-1728136478431.png539×179 24 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
4

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;
}

devcoders_0-1728138025546.png
devcoders_0-1728138025546.png1343×184 130 KB

5

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,

Lisavdijk_0-1728138360101.png
Lisavdijk_0-1728138360101.png408×115 28.1 KB

Thank you in advance,

6 
{% if template.name == "index" %}

{% endif %}
7

Please try this code @Lisavdijk

8

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" %}

{% endif %}

Thank you for your time and support :slightly_smiling_face:

9

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

Lisavdijk_0-1728141949579.png
Lisavdijk_0-1728141949579.png250×400 107 KB

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

10

Can you try add more this code

BSSTekLabs_0-1728142116245.png
BSSTekLabs_0-1728142116245.png379×409 142 KB

11

Hi Teklabs,

thank you once again, this also worked out perfectly :slightly_smiling_face:

appreciate your great support.

Kind regards,

Lisa,