# Change the ELEMENTS COLOR in the HEADER when scrolling

**URL:** <https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012>\
**Category:** Ask the community\
**Tags:** wix-studio, general\
**Created:** [May 19, 2021, 8:55pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012 "2021-05-19T20:55:35Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![thibaultlerailler](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/thibaultlerailler/32/27109_2.png) [@thibaultlerailler](https://forum.wixstudio.com/u/thibaultlerailler)\
**Post date:** [May 19, 2021, 8:55pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/1 "2021-05-19T20:55:35Z")

</div>

Hi All,

I’m trying to change (change to white color) the elements on my header on the home page of my website but keep it unchanged (black color) on all other pages…

**Is there a way to have a color change on the header elements depending on the page?**

Thanks a lot for your help!  
Thib

---

<div class="post-metadata">

**Author:** ![mitchkvernon](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mitchkvernon/32/26951_2.png) [@mitchkvernon](https://forum.wixstudio.com/u/mitchkvernon)\
**Post date:** [May 19, 2021, 8:57pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/2 "2021-05-19T20:57:31Z")

</div>

Can you create a new masters section and simply use that on the desired pages rather than the header?

---

<div class="post-metadata">

**Author:** ![thibaultlerailler](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/thibaultlerailler/32/27109_2.png) [@thibaultlerailler](https://forum.wixstudio.com/u/thibaultlerailler)\
**Post date:** [May 20, 2021, 6:37pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/3 "2021-05-20T18:37:49Z")

</div>

Thanks @mitchkvernon I actually need to explain what I am try to do a little bit better!

Below is an image of my landing page where I would like to get all elements of the header in white for the first section and back to black after the main image.

The elements on the header will only change from white to black on this page and stay black for all other pages of the website

I saw this article but this is to change the header background color not to change the elements color in the header

> **[Editor X: Adding and Customizing Header Scroll Effects | Help Center | Wix.com](https://support.wix.com/en/article/editor-x-adding-and-customizing-header-scroll-effects)**
>
> Draw your visitors' attention to the header and make it stand out by adding scroll effects. When pinning your header to the page, you can also make it move, fad

 ![](https://us1.discourse-cdn.com/wix/original/3X/a/6/a6d4c87121d1cf900005c3c50559169d039f8874.jpeg)

Thanks a lot !

---

<div class="post-metadata">

**Author:** ![thibaultlerailler](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/thibaultlerailler/32/27109_2.png) [@thibaultlerailler](https://forum.wixstudio.com/u/thibaultlerailler)\
**Post date:** [May 20, 2021, 6:46pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/4 "2021-05-20T18:46:36Z")

</div>

@md60th You are my go to person 🙂  
Let me know if you can help here

---

<div class="post-metadata">

**Author:** ![md60th](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/md60th/32/14986_2.png) [@md60th](https://forum.wixstudio.com/u/md60th)\
**Post date:** [May 21, 2021, 9:58am UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/5 "2021-05-21T09:58:41Z")

</div>

I have attached a video. Hope this helps you.  
\*It will probably take some more time for it to be of normal quality

[![](https://us1.discourse-cdn.com/wix/original/3X/6/d/6d7948e11efe7153ae72dbd48449a93dff667b5c.jpeg "Change Menu Items Colors On Scroll | Editor X") ](https://www.youtube.com/watch?v=P3Loafq252M)

---

<div class="post-metadata">

**Author:** ![thibaultlerailler](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/thibaultlerailler/32/27109_2.png) [@thibaultlerailler](https://forum.wixstudio.com/u/thibaultlerailler)\
**Post date:** [May 21, 2021, 12:51pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/6 "2021-05-21T12:51:27Z")

</div>

@md60th Thanks a lot!! That’s exactly what I was looking for!  
Now I need to follow your video step by step and do it myself!

As usual, you are the best!

---

<div class="post-metadata">

**Author:** ![md60th](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/md60th/32/14986_2.png) [@md60th](https://forum.wixstudio.com/u/md60th)\
**Post date:** [May 21, 2021, 1:19pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/7 "2021-05-21T13:19:36Z")

</div>

🍻

---

<div class="post-metadata">

**Author:** ![thibaultlerailler](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/thibaultlerailler/32/27109_2.png) [@thibaultlerailler](https://forum.wixstudio.com/u/thibaultlerailler)\
**Post date:** [May 21, 2021, 1:25pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/8 "2021-05-21T13:25:45Z")

</div>

@md60th

OK, here it goes…  
I don’t have any fill field for the color… The logo is not a Vector art, it is a basic shape

![](https://us1.discourse-cdn.com/wix/original/3X/7/f/7f9421682883fa232a7e35b104b7fd40c76ec022.png)

Below is the HTML:

---

<div class="post-metadata">

**Author:** ![md60th](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/md60th/32/14986_2.png) [@md60th](https://forum.wixstudio.com/u/md60th)\
**Post date:** [May 21, 2021, 1:39pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/9 "2021-05-21T13:39:37Z")

</div>

Try to add this style to each path :

```javascript
fill="${color}"

```

For example:

```javascript
<path data-brackets-id="127" fill="${color}" d="M62.35 57.18a18 18 0 0 1 7 7 20.8 20.8 0 0 1 2.55 10.41 21 21 0 0 1-2.55 10.46 17.87 17.87 0 0 1-7 7 20.69 20.69 0 0 1-10.17 2.47q-7.86 0-12.45-5.24v18.87h-9.11v-53h8.67v5.1a14.06 14.06 0 0 1 5.57-4.15 18.87 18.87 0 0 1 7.32-1.38 20.69 20.69 0 0 1 10.17 2.46zm-2.92 26.23a12.14 12.14 0 0 0 3.24-8.82 12.13 12.13 0 0 0-3.24-8.81 11 11 0 0 0-8.27-3.35 11.78 11.78 0 0 0-5.9 1.49 10.84 10.84 0 0 0-4.15 4.26 14.21 14.21 0 0 0 0 12.83 10.84 10.84 0 0 0 4.15 4.26 11.78 11.78 0 0 0 5.9 1.49 11 11 0 0 0 8.27-3.35z"></path>

```

---

<div class="post-metadata">

**Author:** ![thibaultlerailler](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/thibaultlerailler/32/27109_2.png) [@thibaultlerailler](https://forum.wixstudio.com/u/thibaultlerailler)\
**Post date:** [May 21, 2021, 1:51pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/10 "2021-05-21T13:51:29Z")

</div>

@md60th Nop, It doesn’t work… the basic shape stays in black…

![](https://us1.discourse-cdn.com/wix/original/3X/f/9/f9d81665350ffffa12239bd430de660da1a33208.png)

With the basic shape I have access to the settings to change the color tho, I just don’t know how it’s done in the code

![](https://us1.discourse-cdn.com/wix/original/3X/9/4/9457a8b554a0a1170502c24e30feba82ff0f3a11.png)

---

<div class="post-metadata">

**Author:** ![md60th](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/md60th/32/14986_2.png) [@md60th](https://forum.wixstudio.com/u/md60th)\
**Post date:** [May 21, 2021, 2:04pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/11 "2021-05-21T14:04:56Z")

</div>

You need you use backquote/backtick (`) before the SVG tag.

```javascript
`<svg preserveAspectRatio="xMidYMid meet" data-bbox="30.62 46.55 401.273 61.6" viewBox="30.62 46.55 401.273 61.6" xmlns="http://www.w3.org/2000/svg" data-type="shape" role="img" aria-labelledby="svgcid-e4bq10-81csh4"><title id="svgcid-e4bq10-81csh4"></title>
                    <g>
                        <path fill="${color}" d="M62.35 57.18a18 18 0 0 1 7 7 20.8 20.8 0 0 1 2.55 10.41 21 21 0 0 1-2.55 10.46 17.87 17.87 0 0 1-7 7 20.69 20.69 0 0 1-10.17 2.47q-7.86 0-12.45-5.24v18.87h-9.11v-53h8.67v5.1a14.06 14.06 0 0 1 5.57-4.15 18.87 18.87 0 0 1 7.32-1.38 20.69 20.69 0 0 1 10.17 2.46zm-2.92 26.23a12.14 12.14 0 0 0 3.24-8.82 12.13 12.13 0 0 0-3.24-8.81 11 11 0 0 0-8.27-3.35 11.78 11.78 0 0 0-5.9 1.49 10.84 10.84 0 0 0-4.15 4.26 14.21 14.21 0 0 0 0 12.83 10.84 10.84 0 0 0 4.15 4.26 11.78 11.78 0 0 0 5.9 1.49 11 11 0 0 0 8.27-3.35z"></path>
                        <path fill="${color}" d="M118.26 55.14v38.91h-8.67v-5a14.53 14.53 0 0 1-5.47 4 17.66 17.66 0 0 1-7.06 1.41q-7.8 0-12.28-4.33T80.3 77.36V55.14h9.11v21q0 5.25 2.37 7.84a8.67 8.67 0 0 0 6.74 2.58 10.2 10.2 0 0 0 7.75-3q2.88-3 2.88-8.71V55.14z"></path>
                        <path fill="${color}" d="M164.08 59q4.44 4.3 4.45 12.75v22.3h-9.11V72.92q0-5.1-2.41-7.69a8.88 8.88 0 0 0-6.84-2.58 10.53 10.53 0 0 0-7.94 3q-2.92 3-2.92 8.71v19.69h-9.1V55.14h8.66v5a14.19 14.19 0 0 1 5.69-4.08 20.47 20.47 0 0 1 7.72-1.38q7.35.03 11.8 4.32z"></path>
                        <path fill="${color}" d="M187.46 92a18.75 18.75 0 0 1-7.46-7.1 21 21 0 0 1 0-20.58 18.89 18.89 0 0 1 7.47-7.06 22.74 22.74 0 0 1 10.89-2.55A20.91 20.91 0 0 1 208.41 57a15.13 15.13 0 0 1 6.52 6.7l-7 4.08a11.15 11.15 0 0 0-4.19-4 12.22 12.22 0 0 0-13.95 2 11.87 11.87 0 0 0-3.36 8.85 12 12 0 0 0 3.32 8.86 12.29 12.29 0 0 0 14 2 11.15 11.15 0 0 0 4.19-4l7 4.08a15.87 15.87 0 0 1-6.59 6.74 20.55 20.55 0 0 1-10 2.36A22.84 22.84 0 0 1 187.46 92z"></path>
                        <path fill="${color}" d="M246.69 91.93a10.7 10.7 0 0 1-3.9 2 17.41 17.41 0 0 1-4.84.65q-6.42 0-9.91-3.35t-3.5-9.76V62.72h-6.41v-7.29h6.41v-8.88h9.11v8.88h10.42v7.29h-10.42v18.5a6.18 6.18 0 0 0 1.35 4.34 5.23 5.23 0 0 0 4 1.49 8 8 0 0 0 5.1-1.6z"></path>
                        <path fill="${color}" d="M291.86 55.14v38.91h-8.67v-5a14.53 14.53 0 0 1-5.47 4 17.66 17.66 0 0 1-7.06 1.41q-7.8 0-12.28-4.33t-4.48-12.77V55.14h9.1v21q0 5.25 2.37 7.84a8.66 8.66 0 0 0 6.73 2.58 10.22 10.22 0 0 0 7.76-3q2.88-3 2.88-8.71V55.14z"></path>
                        <path fill="${color}" d="M331.82 58.82q4.55 4.13 4.55 12.42v22.81h-8.6v-4.74a10.64 10.64 0 0 1-4.77 3.9 18.61 18.61 0 0 1-7.47 1.34 18.26 18.26 0 0 1-7.65-1.49 11.82 11.82 0 0 1-5.06-4.15 10.54 10.54 0 0 1-1.78-6 10.31 10.31 0 0 1 3.89-8.42q3.9-3.17 12.28-3.16h10.05v-.59a8 8 0 0 0-2.44-6.26c-1.63-1.46-4-2.19-7.25-2.19a20.89 20.89 0 0 0-6.44 1 15.9 15.9 0 0 0-5.36 2.84l-3.57-6.63a22.24 22.24 0 0 1 7.36-3.57 32.92 32.92 0 0 1 9.11-1.23q8.6.01 13.15 4.12zm-8.31 27.54a8.53 8.53 0 0 0 3.75-4.48v-4.52h-9.39q-7.87 0-7.87 5.17a4.64 4.64 0 0 0 2 3.94 9.07 9.07 0 0 0 5.47 1.46 11.79 11.79 0 0 0 6.04-1.57z"></path>
                        <path fill="${color}" d="M371.41 91.93a10.7 10.7 0 0 1-3.9 2 17.41 17.41 0 0 1-4.84.65q-6.42 0-9.91-3.35t-3.5-9.76V62.72h-6.41v-7.29h6.41v-8.88h9.11v8.88h10.42v7.29h-10.42v18.5a6.18 6.18 0 0 0 1.38 4.34 5.21 5.21 0 0 0 4 1.49 8 8 0 0 0 5.1-1.6z"></path>
                        <path fill="${color}" d="M414 77.51h-30.5a10.62 10.62 0 0 0 4.19 6.81 13.7 13.7 0 0 0 8.42 2.51 14.16 14.16 0 0 0 10.56-4.22l4.88 5.61a16.36 16.36 0 0 1-6.63 4.78 26.35 26.35 0 0 1-20.33-1 18.33 18.33 0 0 1-7.53-7.11 20 20 0 0 1-2.66-10.31 20.38 20.38 0 0 1 2.6-10.22 18.36 18.36 0 0 1 7.18-7.1 20.94 20.94 0 0 1 10.34-2.55 20.33 20.33 0 0 1 10.16 2.51 17.77 17.77 0 0 1 7 7.07 21.45 21.45 0 0 1 2.51 10.52c-.02.63-.07 1.53-.19 2.7zm-26.89-12.93a10.87 10.87 0 0 0-3.68 6.88h22.07a10.77 10.77 0 0 0-3.57-6.85 11.84 11.84 0 0 0-14.82 0z"></path>
                        <path fill="${color}" d="M421.6 92.84a6.07 6.07 0 1 1 4.23 1.71 5.82 5.82 0 0 1-4.23-1.71z"></path>
                    </g>
                </svg>`

```

---

<div class="post-metadata">

**Author:** ![thibaultlerailler](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/thibaultlerailler/32/27109_2.png) [@thibaultlerailler](https://forum.wixstudio.com/u/thibaultlerailler)\
**Post date:** [May 21, 2021, 3:26pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/12 "2021-05-21T15:26:58Z")

</div>

@md60th Sorry to bother but it’s still not working right now…

I tried with the red color and also with the white color

![](https://us1.discourse-cdn.com/wix/original/3X/f/f/ffc37ab5478fb383ab0eda146555d39740b5bcee.png)

![](https://us1.discourse-cdn.com/wix/original/3X/8/3/83873f7dadda9e63edfa059cb7bd9de204e3f086.png)

$w ( ‘#imageVector1’ ). src = `<svg preserveAspectRatio="xMidYMid meet" data-bbox="30.62 46.55 401.273 61.6" viewBox="30.62 46.55 401.273 61.6" xmlns="http://www.w3.org/2000/svg" data-type="shape" role="img" aria-labelledby="svgcid-e4bq10-81csh4"><title id="svgcid-e4bq10-81csh4"></title> <g> <path fill=" ${ red } " d="M62.35 57.18a18 18 0 0 1 7 7 20.8 20.8 0 0 1 2.55 10.41 21 21 0 0 1-2.55 10.46 17.87 17.87 0 0 1-7 7 20.69 20.69 0 0 1-10.17 2.47q-7.86 0-12.45-5.24v18.87h-9.11v-53h8.67v5.1a14.06 14.06 0 0 1 5.57-4.15 18.87 18.87 0 0 1 7.32-1.38 20.69 20.69 0 0 1 10.17 2.46zm-2.92 26.23a12.14 12.14 0 0 0 3.24-8.82 12.13 12.13 0 0 0-3.24-8.81 11 11 0 0 0-8.27-3.35 11.78 11.78 0 0 0-5.9 1.49 10.84 10.84 0 0 0-4.15 4.26 14.21 14.21 0 0 0 0 12.83 10.84 10.84 0 0 0 4.15 4.26 11.78 11.78 0 0 0 5.9 1.49 11 11 0 0 0 8.27-3.35z"></path> <path fill=" ${ red } " d="M118.26 55.14v38.91h-8.67v-5a14.53 14.53 0 0 1-5.47 4 17.66 17.66 0 0 1-7.06 1.41q-7.8 0-12.28-4.33T80.3 77.36V55.14h9.11v21q0 5.25 2.37 7.84a8.67 8.67 0 0 0 6.74 2.58 10.2 10.2 0 0 0 7.75-3q2.88-3 2.88-8.71V55.14z"></path> <path fill=" ${ red } " d="M164.08 59q4.44 4.3 4.45 12.75v22.3h-9.11V72.92q0-5.1-2.41-7.69a8.88 8.88 0 0 0-6.84-2.58 10.53 10.53 0 0 0-7.94 3q-2.92 3-2.92 8.71v19.69h-9.1V55.14h8.66v5a14.19 14.19 0 0 1 5.69-4.08 20.47 20.47 0 0 1 7.72-1.38q7.35.03 11.8 4.32z"></path> <path fill=" ${ red } " d="M187.46 92a18.75 18.75 0 0 1-7.46-7.1 21 21 0 0 1 0-20.58 18.89 18.89 0 0 1 7.47-7.06 22.74 22.74 0 0 1 10.89-2.55A20.91 20.91 0 0 1 208.41 57a15.13 15.13 0 0 1 6.52 6.7l-7 4.08a11.15 11.15 0 0 0-4.19-4 12.22 12.22 0 0 0-13.95 2 11.87 11.87 0 0 0-3.36 8.85 12 12 0 0 0 3.32 8.86 12.29 12.29 0 0 0 14 2 11.15 11.15 0 0 0 4.19-4l7 4.08a15.87 15.87 0 0 1-6.59 6.74 20.55 20.55 0 0 1-10 2.36A22.84 22.84 0 0 1 187.46 92z"></path> <path fill=" ${ red } " d="M246.69 91.93a10.7 10.7 0 0 1-3.9 2 17.41 17.41 0 0 1-4.84.65q-6.42 0-9.91-3.35t-3.5-9.76V62.72h-6.41v-7.29h6.41v-8.88h9.11v8.88h10.42v7.29h-10.42v18.5a6.18 6.18 0 0 0 1.35 4.34 5.23 5.23 0 0 0 4 1.49 8 8 0 0 0 5.1-1.6z"></path> <path fill=" ${ red } " d="M291.86 55.14v38.91h-8.67v-5a14.53 14.53 0 0 1-5.47 4 17.66 17.66 0 0 1-7.06 1.41q-7.8 0-12.28-4.33t-4.48-12.77V55.14h9.1v21q0 5.25 2.37 7.84a8.66 8.66 0 0 0 6.73 2.58 10.22 10.22 0 0 0 7.76-3q2.88-3 2.88-8.71V55.14z"></path> <path fill=" ${ red } " d="M331.82 58.82q4.55 4.13 4.55 12.42v22.81h-8.6v-4.74a10.64 10.64 0 0 1-4.77 3.9 18.61 18.61 0 0 1-7.47 1.34 18.26 18.26 0 0 1-7.65-1.49 11.82 11.82 0 0 1-5.06-4.15 10.54 10.54 0 0 1-1.78-6 10.31 10.31 0 0 1 3.89-8.42q3.9-3.17 12.28-3.16h10.05v-.59a8 8 0 0 0-2.44-6.26c-1.63-1.46-4-2.19-7.25-2.19a20.89 20.89 0 0 0-6.44 1 15.9 15.9 0 0 0-5.36 2.84l-3.57-6.63a22.24 22.24 0 0 1 7.36-3.57 32.92 32.92 0 0 1 9.11-1.23q8.6.01 13.15 4.12zm-8.31 27.54a8.53 8.53 0 0 0 3.75-4.48v-4.52h-9.39q-7.87 0-7.87 5.17a4.64 4.64 0 0 0 2 3.94 9.07 9.07 0 0 0 5.47 1.46 11.79 11.79 0 0 0 6.04-1.57z"></path> <path fill=" ${ red } " d="M371.41 91.93a10.7 10.7 0 0 1-3.9 2 17.41 17.41 0 0 1-4.84.65q-6.42 0-9.91-3.35t-3.5-9.76V62.72h-6.41v-7.29h6.41v-8.88h9.11v8.88h10.42v7.29h-10.42v18.5a6.18 6.18 0 0 0 1.38 4.34 5.21 5.21 0 0 0 4 1.49 8 8 0 0 0 5.1-1.6z"></path> <path fill=" ${ red } " d="M414 77.51h-30.5a10.62 10.62 0 0 0 4.19 6.81 13.7 13.7 0 0 0 8.42 2.51 14.16 14.16 0 0 0 10.56-4.22l4.88 5.61a16.36 16.36 0 0 1-6.63 4.78 26.35 26.35 0 0 1-20.33-1 18.33 18.33 0 0 1-7.53-7.11 20 20 0 0 1-2.66-10.31 20.38 20.38 0 0 1 2.6-10.22 18.36 18.36 0 0 1 7.18-7.1 20.94 20.94 0 0 1 10.34-2.55 20.33 20.33 0 0 1 10.16 2.51 17.77 17.77 0 0 1 7 7.07 21.45 21.45 0 0 1 2.51 10.52c-.02.63-.07 1.53-.19 2.7zm-26.89-12.93a10.87 10.87 0 0 0-3.68 6.88h22.07a10.77 10.77 0 0 0-3.57-6.85 11.84 11.84 0 0 0-14.82 0z"></path> <path fill=" ${ red } " d="M421.6 92.84a6.07 6.07 0 1 1 4.23 1.71 5.82 5.82 0 0 1-4.23-1.71z"></path> </g> </svg>`

---

<div class="post-metadata">

**Author:** ![md60th](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/md60th/32/14986_2.png) [@md60th](https://forum.wixstudio.com/u/md60th)\
**Post date:** [May 21, 2021, 3:34pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/13 "2021-05-21T15:34:18Z")

</div>

**${ }** This is can hold only a variable.  
Try to do exactly as I did.  
There’s no reason it would not work for you.

* * *

```javascript
const menuItems = {
    color: {
        black: '#000000',
        white: '#ffffff',
        pink: '#ff00de'
     },
    setItemsColor: (color) => {
         return // PASTE THE SVG CODE HERE.
     }
}

```

* * *

Update if it works.

---

<div class="post-metadata">

**Author:** ![thibaultlerailler](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/thibaultlerailler/32/27109_2.png) [@thibaultlerailler](https://forum.wixstudio.com/u/thibaultlerailler)\
**Post date:** [May 21, 2021, 4:17pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/14 "2021-05-21T16:17:49Z")

</div>

@md60th I don’t know why it’s not working… I’m probably doing something wrong but I can’t put my finger on it!

Here is all the codes I wrote, copying exactly what you did in the video

**const** menuItems = {  
color : {  
black : ‘#000000’ ,  
white : ‘#ffffff’ ,  
pink : ‘#ff00de’  
},  
setItemsColor : ( color ) =\> {  
return `<svg preserveAspectRatio="xMidYMid meet" data-bbox="30.62 46.55 401.273 61.6" viewBox="30.62 46.55 401.273 61.6" xmlns="http://www.w3.org/2000/svg" data-type="shape" role="img" aria-labelledby="svgcid-e4bq10-81csh4"><title id="svgcid-e4bq10-81csh4"></title> <g> <path fill=" ${ color } " d="M62.35 57.18a18 18 0 0 1 7 7 20.8 20.8 0 0 1 2.55 10.41 21 21 0 0 1-2.55 10.46 17.87 17.87 0 0 1-7 7 20.69 20.69 0 0 1-10.17 2.47q-7.86 0-12.45-5.24v18.87h-9.11v-53h8.67v5.1a14.06 14.06 0 0 1 5.57-4.15 18.87 18.87 0 0 1 7.32-1.38 20.69 20.69 0 0 1 10.17 2.46zm-2.92 26.23a12.14 12.14 0 0 0 3.24-8.82 12.13 12.13 0 0 0-3.24-8.81 11 11 0 0 0-8.27-3.35 11.78 11.78 0 0 0-5.9 1.49 10.84 10.84 0 0 0-4.15 4.26 14.21 14.21 0 0 0 0 12.83 10.84 10.84 0 0 0 4.15 4.26 11.78 11.78 0 0 0 5.9 1.49 11 11 0 0 0 8.27-3.35z"></path> <path fill=" ${ color } " d="M118.26 55.14v38.91h-8.67v-5a14.53 14.53 0 0 1-5.47 4 17.66 17.66 0 0 1-7.06 1.41q-7.8 0-12.28-4.33T80.3 77.36V55.14h9.11v21q0 5.25 2.37 7.84a8.67 8.67 0 0 0 6.74 2.58 10.2 10.2 0 0 0 7.75-3q2.88-3 2.88-8.71V55.14z"></path> <path fill=" ${ color } " d="M164.08 59q4.44 4.3 4.45 12.75v22.3h-9.11V72.92q0-5.1-2.41-7.69a8.88 8.88 0 0 0-6.84-2.58 10.53 10.53 0 0 0-7.94 3q-2.92 3-2.92 8.71v19.69h-9.1V55.14h8.66v5a14.19 14.19 0 0 1 5.69-4.08 20.47 20.47 0 0 1 7.72-1.38q7.35.03 11.8 4.32z"></path> <path fill=" ${ color } " d="M187.46 92a18.75 18.75 0 0 1-7.46-7.1 21 21 0 0 1 0-20.58 18.89 18.89 0 0 1 7.47-7.06 22.74 22.74 0 0 1 10.89-2.55A20.91 20.91 0 0 1 208.41 57a15.13 15.13 0 0 1 6.52 6.7l-7 4.08a11.15 11.15 0 0 0-4.19-4 12.22 12.22 0 0 0-13.95 2 11.87 11.87 0 0 0-3.36 8.85 12 12 0 0 0 3.32 8.86 12.29 12.29 0 0 0 14 2 11.15 11.15 0 0 0 4.19-4l7 4.08a15.87 15.87 0 0 1-6.59 6.74 20.55 20.55 0 0 1-10 2.36A22.84 22.84 0 0 1 187.46 92z"></path> <path fill=" ${ color } " d="M246.69 91.93a10.7 10.7 0 0 1-3.9 2 17.41 17.41 0 0 1-4.84.65q-6.42 0-9.91-3.35t-3.5-9.76V62.72h-6.41v-7.29h6.41v-8.88h9.11v8.88h10.42v7.29h-10.42v18.5a6.18 6.18 0 0 0 1.35 4.34 5.23 5.23 0 0 0 4 1.49 8 8 0 0 0 5.1-1.6z"></path> <path fill=" ${ color } " d="M291.86 55.14v38.91h-8.67v-5a14.53 14.53 0 0 1-5.47 4 17.66 17.66 0 0 1-7.06 1.41q-7.8 0-12.28-4.33t-4.48-12.77V55.14h9.1v21q0 5.25 2.37 7.84a8.66 8.66 0 0 0 6.73 2.58 10.22 10.22 0 0 0 7.76-3q2.88-3 2.88-8.71V55.14z"></path> <path fill=" ${ color } " d="M331.82 58.82q4.55 4.13 4.55 12.42v22.81h-8.6v-4.74a10.64 10.64 0 0 1-4.77 3.9 18.61 18.61 0 0 1-7.47 1.34 18.26 18.26 0 0 1-7.65-1.49 11.82 11.82 0 0 1-5.06-4.15 10.54 10.54 0 0 1-1.78-6 10.31 10.31 0 0 1 3.89-8.42q3.9-3.17 12.28-3.16h10.05v-.59a8 8 0 0 0-2.44-6.26c-1.63-1.46-4-2.19-7.25-2.19a20.89 20.89 0 0 0-6.44 1 15.9 15.9 0 0 0-5.36 2.84l-3.57-6.63a22.24 22.24 0 0 1 7.36-3.57 32.92 32.92 0 0 1 9.11-1.23q8.6.01 13.15 4.12zm-8.31 27.54a8.53 8.53 0 0 0 3.75-4.48v-4.52h-9.39q-7.87 0-7.87 5.17a4.64 4.64 0 0 0 2 3.94 9.07 9.07 0 0 0 5.47 1.46 11.79 11.79 0 0 0 6.04-1.57z"></path> <path fill=" ${ color } " d="M371.41 91.93a10.7 10.7 0 0 1-3.9 2 17.41 17.41 0 0 1-4.84.65q-6.42 0-9.91-3.35t-3.5-9.76V62.72h-6.41v-7.29h6.41v-8.88h9.11v8.88h10.42v7.29h-10.42v18.5a6.18 6.18 0 0 0 1.38 4.34 5.21 5.21 0 0 0 4 1.49 8 8 0 0 0 5.1-1.6z"></path> <path fill=" ${ color } " d="M414 77.51h-30.5a10.62 10.62 0 0 0 4.19 6.81 13.7 13.7 0 0 0 8.42 2.51 14.16 14.16 0 0 0 10.56-4.22l4.88 5.61a16.36 16.36 0 0 1-6.63 4.78 26.35 26.35 0 0 1-20.33-1 18.33 18.33 0 0 1-7.53-7.11 20 20 0 0 1-2.66-10.31 20.38 20.38 0 0 1 2.6-10.22 18.36 18.36 0 0 1 7.18-7.1 20.94 20.94 0 0 1 10.34-2.55 20.33 20.33 0 0 1 10.16 2.51 17.77 17.77 0 0 1 7 7.07 21.45 21.45 0 0 1 2.51 10.52c-.02.63-.07 1.53-.19 2.7zm-26.89-12.93a10.87 10.87 0 0 0-3.68 6.88h22.07a10.77 10.77 0 0 0-3.57-6.85 11.84 11.84 0 0 0-14.82 0z"></path> <path fill=" ${ color } " d="M421.6 92.84a6.07 6.07 0 1 1 4.23 1.71 5.82 5.82 0 0 1-4.23-1.71z"></path> </g> </svg>`  
}

$w . onReady ( **function** () {

});

/\*\*

- Adds an event handler that runs when an element is no longer  
displayed in the viewable part of the current window.
- @param {$w.Event} event  
\*/  
export function section5\_viewportLeave ( Event ) {  
$w ( ‘#logo’ ). src = menuItems . setItemsColor ( menuItems . color . white );  
}

---

<div class="post-metadata">

**Author:** ![md60th](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/md60th/32/14986_2.png) [@md60th](https://forum.wixstudio.com/u/md60th)\
**Post date:** [May 21, 2021, 4:24pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/15 "2021-05-21T16:24:12Z")

</div>

Send link to your site

---

<div class="post-metadata">

**Author:** ![thibaultlerailler](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/thibaultlerailler/32/27109_2.png) [@thibaultlerailler](https://forum.wixstudio.com/u/thibaultlerailler)\
**Post date:** [May 21, 2021, 4:27pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/16 "2021-05-21T16:27:01Z")

</div>

@md60th Thanks a lot for your time!

I’m trying to find the problems but to be honest I have no idea:

1 . It looks like src is not in my list of actions so I wrote it manually

![](https://us1.discourse-cdn.com/wix/original/3X/2/3/23f90f40e9712ede7304dffbd4b66172c618c0a3.png)

1. $w looks like a mistake as well but I have no idea why…

[https://static.wixstatic.com/media/a27d24\_01bcc58ecf4c491baff2d01e17a7c2cb~mv2.jpg(image larger than 4 MB)](https://static.wixstatic.com/media/a27d24_01bcc58ecf4c491baff2d01e17a7c2cb~mv2.jpg)

---

<div class="post-metadata">

**Author:** ![md60th](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/md60th/32/14986_2.png) [@md60th](https://forum.wixstudio.com/u/md60th)\
**Post date:** [May 21, 2021, 5:17pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/17 "2021-05-21T17:17:24Z")

</div>

You have an **unnecessary comma** after the **setItemsColor** function.  
This causes an error and then the code does not work.

Also, section5\_viewportLeave ( **Event** ) need to be **event**.

Copy paste this code:

```javascript
// API Reference: https://www.wix.com/velo/reference/api-overview/introduction

const menuItems = {
    color: {
        black: '#000000',
        white: '#ffffff',
        pink: '#ff00de'
 },
    setItemsColor: (color) => {
 return `<svg preserveAspectRatio="xMidYMid meet" data-bbox="30.62 46.55 401.273 61.6" viewBox="30.62 46.55 401.273 61.6" xmlns="http://www.w3.org/2000/svg" data-type="shape" role="img" aria-labelledby="svgcid-e4bq10-81csh4"><title id="svgcid-e4bq10-81csh4"></title>
    <g>
        <path fill="${color}" d="M62.35 57.18a18 18 0 0 1 7 7 20.8 20.8 0 0 1 2.55 10.41 21 21 0 0 1-2.55 10.46 17.87 17.87 0 0 1-7 7 20.69 20.69 0 0 1-10.17 2.47q-7.86 0-12.45-5.24v18.87h-9.11v-53h8.67v5.1a14.06 14.06 0 0 1 5.57-4.15 18.87 18.87 0 0 1 7.32-1.38 20.69 20.69 0 0 1 10.17 2.46zm-2.92 26.23a12.14 12.14 0 0 0 3.24-8.82 12.13 12.13 0 0 0-3.24-8.81 11 11 0 0 0-8.27-3.35 11.78 11.78 0 0 0-5.9 1.49 10.84 10.84 0 0 0-4.15 4.26 14.21 14.21 0 0 0 0 12.83 10.84 10.84 0 0 0 4.15 4.26 11.78 11.78 0 0 0 5.9 1.49 11 11 0 0 0 8.27-3.35z"></path>
        <path fill="${color}" d="M118.26 55.14v38.91h-8.67v-5a14.53 14.53 0 0 1-5.47 4 17.66 17.66 0 0 1-7.06 1.41q-7.8 0-12.28-4.33T80.3 77.36V55.14h9.11v21q0 5.25 2.37 7.84a8.67 8.67 0 0 0 6.74 2.58 10.2 10.2 0 0 0 7.75-3q2.88-3 2.88-8.71V55.14z"></path>
        <path fill="${color}" d="M164.08 59q4.44 4.3 4.45 12.75v22.3h-9.11V72.92q0-5.1-2.41-7.69a8.88 8.88 0 0 0-6.84-2.58 10.53 10.53 0 0 0-7.94 3q-2.92 3-2.92 8.71v19.69h-9.1V55.14h8.66v5a14.19 14.19 0 0 1 5.69-4.08 20.47 20.47 0 0 1 7.72-1.38q7.35.03 11.8 4.32z"></path>
        <path fill="${color}" d="M187.46 92a18.75 18.75 0 0 1-7.46-7.1 21 21 0 0 1 0-20.58 18.89 18.89 0 0 1 7.47-7.06 22.74 22.74 0 0 1 10.89-2.55A20.91 20.91 0 0 1 208.41 57a15.13 15.13 0 0 1 6.52 6.7l-7 4.08a11.15 11.15 0 0 0-4.19-4 12.22 12.22 0 0 0-13.95 2 11.87 11.87 0 0 0-3.36 8.85 12 12 0 0 0 3.32 8.86 12.29 12.29 0 0 0 14 2 11.15 11.15 0 0 0 4.19-4l7 4.08a15.87 15.87 0 0 1-6.59 6.74 20.55 20.55 0 0 1-10 2.36A22.84 22.84 0 0 1 187.46 92z"></path>
        <path fill="${color}" d="M246.69 91.93a10.7 10.7 0 0 1-3.9 2 17.41 17.41 0 0 1-4.84.65q-6.42 0-9.91-3.35t-3.5-9.76V62.72h-6.41v-7.29h6.41v-8.88h9.11v8.88h10.42v7.29h-10.42v18.5a6.18 6.18 0 0 0 1.35 4.34 5.23 5.23 0 0 0 4 1.49 8 8 0 0 0 5.1-1.6z"></path>
        <path fill="${color}" d="M291.86 55.14v38.91h-8.67v-5a14.53 14.53 0 0 1-5.47 4 17.66 17.66 0 0 1-7.06 1.41q-7.8 0-12.28-4.33t-4.48-12.77V55.14h9.1v21q0 5.25 2.37 7.84a8.66 8.66 0 0 0 6.73 2.58 10.22 10.22 0 0 0 7.76-3q2.88-3 2.88-8.71V55.14z"></path>
        <path fill="${color}" d="M331.82 58.82q4.55 4.13 4.55 12.42v22.81h-8.6v-4.74a10.64 10.64 0 0 1-4.77 3.9 18.61 18.61 0 0 1-7.47 1.34 18.26 18.26 0 0 1-7.65-1.49 11.82 11.82 0 0 1-5.06-4.15 10.54 10.54 0 0 1-1.78-6 10.31 10.31 0 0 1 3.89-8.42q3.9-3.17 12.28-3.16h10.05v-.59a8 8 0 0 0-2.44-6.26c-1.63-1.46-4-2.19-7.25-2.19a20.89 20.89 0 0 0-6.44 1 15.9 15.9 0 0 0-5.36 2.84l-3.57-6.63a22.24 22.24 0 0 1 7.36-3.57 32.92 32.92 0 0 1 9.11-1.23q8.6.01 13.15 4.12zm-8.31 27.54a8.53 8.53 0 0 0 3.75-4.48v-4.52h-9.39q-7.87 0-7.87 5.17a4.64 4.64 0 0 0 2 3.94 9.07 9.07 0 0 0 5.47 1.46 11.79 11.79 0 0 0 6.04-1.57z"></path>
        <path fill="${color}" d="M371.41 91.93a10.7 10.7 0 0 1-3.9 2 17.41 17.41 0 0 1-4.84.65q-6.42 0-9.91-3.35t-3.5-9.76V62.72h-6.41v-7.29h6.41v-8.88h9.11v8.88h10.42v7.29h-10.42v18.5a6.18 6.18 0 0 0 1.38 4.34 5.21 5.21 0 0 0 4 1.49 8 8 0 0 0 5.1-1.6z"></path>
        <path fill="${color}" d="M414 77.51h-30.5a10.62 10.62 0 0 0 4.19 6.81 13.7 13.7 0 0 0 8.42 2.51 14.16 14.16 0 0 0 10.56-4.22l4.88 5.61a16.36 16.36 0 0 1-6.63 4.78 26.35 26.35 0 0 1-20.33-1 18.33 18.33 0 0 1-7.53-7.11 20 20 0 0 1-2.66-10.31 20.38 20.38 0 0 1 2.6-10.22 18.36 18.36 0 0 1 7.18-7.1 20.94 20.94 0 0 1 10.34-2.55 20.33 20.33 0 0 1 10.16 2.51 17.77 17.77 0 0 1 7 7.07 21.45 21.45 0 0 1 2.51 10.52c-.02.63-.07 1.53-.19 2.7zm-26.89-12.93a10.87 10.87 0 0 0-3.68 6.88h22.07a10.77 10.77 0 0 0-3.57-6.85 11.84 11.84 0 0 0-14.82 0z"></path>
        <path fill="${color}" d="M421.6 92.84a6.07 6.07 0 1 1 4.23 1.71 5.82 5.82 0 0 1-4.23-1.71z"></path>
    </g>
</svg>`
 }
}

$w.onReady(function () {

});

/**
* Adds an event handler that runs when an element is no longer
 displayed in the viewable part of the current window.
* @param {$w.Event} event
*/
export function section5_viewportLeave(event) {
    $w('#logo').src = menuItems.setItemsColor(menuItems.color.white);
}

```

---

<div class="post-metadata">

**Author:** ![thibaultlerailler](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/thibaultlerailler/32/27109_2.png) [@thibaultlerailler](https://forum.wixstudio.com/u/thibaultlerailler)\
**Post date:** [May 21, 2021, 5:49pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/18 "2021-05-21T17:49:06Z")

</div>

@md60th You are exceptional! Thanks a lot!

I added a line to have the logo back to white when back on the section and everything works perfectly!!

To do the same with the hamburger menu I guess I just duplicate everything and replace '#logo" by “#hamburgermenu” or there is a better way?

---

<div class="post-metadata">

**Author:** ![md60th](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/md60th/32/14986_2.png) [@md60th](https://forum.wixstudio.com/u/md60th)\
**Post date:** [May 21, 2021, 6:17pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/19 "2021-05-21T18:17:16Z")

</div>

Hmmm not exactly.  
First of all you need to know what is the **SVG code of the Hamburger menu** (you take it from the Live site).  
Then you need to slightly update the code so that the function **returns an object with 2 elements**.  
One for the **logo** and one for the **hamburger menu**.

- It is important that you try to understand what the code does to be able to make changes in the future.

Anyway, I did it for you:

```javascript
const menuItems = {
    color: {
        black: '#000000',
        white: '#ffffff',
        pink: '#ff00de'
 },
    setItemsColor: (color) => {
 return {
            logo: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="30.62 46.55 401.273 61.6" viewBox="30.62 46.55 401.273 61.6" xmlns="http://www.w3.org/2000/svg" data-type="shape" role="img" aria-labelledby="svgcid-e4bq10-81csh4"><title id="svgcid-e4bq10-81csh4"></title>
                    <g>
                        <path fill="${color}" d="M62.35 57.18a18 18 0 0 1 7 7 20.8 20.8 0 0 1 2.55 10.41 21 21 0 0 1-2.55 10.46 17.87 17.87 0 0 1-7 7 20.69 20.69 0 0 1-10.17 2.47q-7.86 0-12.45-5.24v18.87h-9.11v-53h8.67v5.1a14.06 14.06 0 0 1 5.57-4.15 18.87 18.87 0 0 1 7.32-1.38 20.69 20.69 0 0 1 10.17 2.46zm-2.92 26.23a12.14 12.14 0 0 0 3.24-8.82 12.13 12.13 0 0 0-3.24-8.81 11 11 0 0 0-8.27-3.35 11.78 11.78 0 0 0-5.9 1.49 10.84 10.84 0 0 0-4.15 4.26 14.21 14.21 0 0 0 0 12.83 10.84 10.84 0 0 0 4.15 4.26 11.78 11.78 0 0 0 5.9 1.49 11 11 0 0 0 8.27-3.35z"></path>
                        <path fill="${color}" d="M118.26 55.14v38.91h-8.67v-5a14.53 14.53 0 0 1-5.47 4 17.66 17.66 0 0 1-7.06 1.41q-7.8 0-12.28-4.33T80.3 77.36V55.14h9.11v21q0 5.25 2.37 7.84a8.67 8.67 0 0 0 6.74 2.58 10.2 10.2 0 0 0 7.75-3q2.88-3 2.88-8.71V55.14z"></path>
                        <path fill="${color}" d="M164.08 59q4.44 4.3 4.45 12.75v22.3h-9.11V72.92q0-5.1-2.41-7.69a8.88 8.88 0 0 0-6.84-2.58 10.53 10.53 0 0 0-7.94 3q-2.92 3-2.92 8.71v19.69h-9.1V55.14h8.66v5a14.19 14.19 0 0 1 5.69-4.08 20.47 20.47 0 0 1 7.72-1.38q7.35.03 11.8 4.32z"></path>
                        <path fill="${color}" d="M187.46 92a18.75 18.75 0 0 1-7.46-7.1 21 21 0 0 1 0-20.58 18.89 18.89 0 0 1 7.47-7.06 22.74 22.74 0 0 1 10.89-2.55A20.91 20.91 0 0 1 208.41 57a15.13 15.13 0 0 1 6.52 6.7l-7 4.08a11.15 11.15 0 0 0-4.19-4 12.22 12.22 0 0 0-13.95 2 11.87 11.87 0 0 0-3.36 8.85 12 12 0 0 0 3.32 8.86 12.29 12.29 0 0 0 14 2 11.15 11.15 0 0 0 4.19-4l7 4.08a15.87 15.87 0 0 1-6.59 6.74 20.55 20.55 0 0 1-10 2.36A22.84 22.84 0 0 1 187.46 92z"></path>
                        <path fill="${color}" d="M246.69 91.93a10.7 10.7 0 0 1-3.9 2 17.41 17.41 0 0 1-4.84.65q-6.42 0-9.91-3.35t-3.5-9.76V62.72h-6.41v-7.29h6.41v-8.88h9.11v8.88h10.42v7.29h-10.42v18.5a6.18 6.18 0 0 0 1.35 4.34 5.23 5.23 0 0 0 4 1.49 8 8 0 0 0 5.1-1.6z"></path>
                        <path fill="${color}" d="M291.86 55.14v38.91h-8.67v-5a14.53 14.53 0 0 1-5.47 4 17.66 17.66 0 0 1-7.06 1.41q-7.8 0-12.28-4.33t-4.48-12.77V55.14h9.1v21q0 5.25 2.37 7.84a8.66 8.66 0 0 0 6.73 2.58 10.22 10.22 0 0 0 7.76-3q2.88-3 2.88-8.71V55.14z"></path>
                        <path fill="${color}" d="M331.82 58.82q4.55 4.13 4.55 12.42v22.81h-8.6v-4.74a10.64 10.64 0 0 1-4.77 3.9 18.61 18.61 0 0 1-7.47 1.34 18.26 18.26 0 0 1-7.65-1.49 11.82 11.82 0 0 1-5.06-4.15 10.54 10.54 0 0 1-1.78-6 10.31 10.31 0 0 1 3.89-8.42q3.9-3.17 12.28-3.16h10.05v-.59a8 8 0 0 0-2.44-6.26c-1.63-1.46-4-2.19-7.25-2.19a20.89 20.89 0 0 0-6.44 1 15.9 15.9 0 0 0-5.36 2.84l-3.57-6.63a22.24 22.24 0 0 1 7.36-3.57 32.92 32.92 0 0 1 9.11-1.23q8.6.01 13.15 4.12zm-8.31 27.54a8.53 8.53 0 0 0 3.75-4.48v-4.52h-9.39q-7.87 0-7.87 5.17a4.64 4.64 0 0 0 2 3.94 9.07 9.07 0 0 0 5.47 1.46 11.79 11.79 0 0 0 6.04-1.57z"></path>
                        <path fill="${color}" d="M371.41 91.93a10.7 10.7 0 0 1-3.9 2 17.41 17.41 0 0 1-4.84.65q-6.42 0-9.91-3.35t-3.5-9.76V62.72h-6.41v-7.29h6.41v-8.88h9.11v8.88h10.42v7.29h-10.42v18.5a6.18 6.18 0 0 0 1.38 4.34 5.21 5.21 0 0 0 4 1.49 8 8 0 0 0 5.1-1.6z"></path>
                        <path fill="${color}" d="M414 77.51h-30.5a10.62 10.62 0 0 0 4.19 6.81 13.7 13.7 0 0 0 8.42 2.51 14.16 14.16 0 0 0 10.56-4.22l4.88 5.61a16.36 16.36 0 0 1-6.63 4.78 26.35 26.35 0 0 1-20.33-1 18.33 18.33 0 0 1-7.53-7.11 20 20 0 0 1-2.66-10.31 20.38 20.38 0 0 1 2.6-10.22 18.36 18.36 0 0 1 7.18-7.1 20.94 20.94 0 0 1 10.34-2.55 20.33 20.33 0 0 1 10.16 2.51 17.77 17.77 0 0 1 7 7.07 21.45 21.45 0 0 1 2.51 10.52c-.02.63-.07 1.53-.19 2.7zm-26.89-12.93a10.87 10.87 0 0 0-3.68 6.88h22.07a10.77 10.77 0 0 0-3.57-6.85 11.84 11.84 0 0 0-14.82 0z"></path>
                        <path fill="${color}" d="M421.6 92.84a6.07 6.07 0 1 1 4.23 1.71 5.82 5.82 0 0 1-4.23-1.71z"></path>
                    </g>
                </svg>`,
            hamburgerMenu: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="33.5 63.7 133.5 67.1" viewBox="33.5 63.7 133.5 67.1" height="200" width="200" xmlns="http://www.w3.org/2000/svg" data-type="color" role="img" aria-labelledby="svgcid-eviibxipg1ow"><defs><style>#comp-klkbrlyy2_r_comp-k9wga0tn svg [data-color="1"] {fill: #262626;}</style></defs><title id="svgcid-eviibxipg1ow">Open site navigation</title>
                                <g>
                                    <path fill="${color}" d="M166.3 63.7v5H33.5v-5h132.8z" data-color="1"></path>
                                    <path fill="${color}" d="M167 94.4v5H34.2v-5H167z" data-color="1"></path>
                                    <path fill="${color}" d="M167 125.8v5h-60v-5h60z" data-color="1"></path>
                                </g>
                            </svg>`
 }
 }
}

$w.onReady(function () {

});

export function line1_viewportEnter(event) {
    animateMenuElements(menuItems.color.white)
}

async function animateMenuElements(color) {
    $w('#logo').src = menuItems.setItemsColor(color).logo;
    $w('#hamburgerMenu').src = menuItems.setItemsColor(color).hamburgerMenu;
}

```

---

<div class="post-metadata">

**Author:** ![thibaultlerailler](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/thibaultlerailler/32/27109_2.png) [@thibaultlerailler](https://forum.wixstudio.com/u/thibaultlerailler)\
**Post date:** [May 21, 2021, 6:56pm UTC](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012/20 "2021-05-21T18:56:46Z")

</div>

@md60th Thanks a lot!!! Everything is perfect right now!

I did some adjustments to make it work, just to let you know

1- I change the fill field from “#262626” to “color” as you did in your first video

 ![](https://us1.discourse-cdn.com/wix/original/3X/1/d/1da94bd84ede40d035e1e8ac7e6637f128a6a6ca.png)

2- Here is the final code

$w . onReady ( **function** () {

});

export function section5\_viewportEnter ( event ) {  
animateMenuElements ( menuItems . color . white )  
}

export function section5\_viewportLeave ( event ) {  
animateMenuElements ( menuItems . color . black )  
}

**async function** animateMenuElements ( color ) {  
$w ( ‘#logo’ ). src = menuItems . setItemsColor ( color ). logo ;  
$w ( ‘#hamburgerMenu’ ). src = menuItems . setItemsColor ( color ). hamburgerMenu ;  
}

Thanks again for all your help! Have a superb weekend!

[Next page](https://forum.wixstudio.com/t/change-the-elements-color-in-the-header-when-scrolling/50012.md?page=2)