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
Can you create a new masters section and simply use that on the desired pages rather than the header?
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
Thanks a lot !
@md60th You are my go to person 
Let me know if you can help here
I have attached a video. Hope this helps you.
*It will probably take some more time for it to be of normal quality
@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!
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
Below is the HTML:
Try to add this style to each path :
fill="${color}"
For example:
<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>
@md60th Nop, It doesn’t work… the basic shape stays in black…
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
You need you use backquote/backtick (`) before the SVG tag.
`<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>`
@md60th Sorry to bother but it’s still not working right now…
I tried with the red color and also with the white color
$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>
${ } This is can hold only a variable.
Try to do exactly as I did.
There’s no reason it would not work for you.
const menuItems = {
color: {
black: '#000000',
white: '#ffffff',
pink: '#ff00de'
},
setItemsColor: (color) => {
return // PASTE THE SVG CODE HERE.
}
}
Update if it works.
@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 () {
});
/**
Send link to your site
@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
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:
// 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);
}
@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?
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 .
Anyway, I did it for you:
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;
}
@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
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!
