Hi there.
I’m looking for some assistance making the upper left hand logo turn white like the rest of the site when i invert the colours using the dot in the top right corner.
My website is https://www.everall.design
Appreciate any help.
Best,
Welcome to the forum Jamie!
You can embed the svg and set the fill to fill="currentColor" this means in will inherit the font color it’s given. This way you can easily change it! Here is an embed example:
<svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11.7701 3.26667C11.7701 3.26667 10.4828 7.37333 10.3908 7.74666C10.3908 7.37333 9.37931 0 9.37931 0C7.17241 0 5.97701 1.58667 5.42529 3.26667C5.42529 3.26667 3.86207 7.37333 3.77012 7.74666C3.67816 7.46666 3.49425 3.36 3.49425 3.36C3.31034 1.30667 1.47126 0 0 0L1.83908 11.2C4.13793 11.2 5.42529 9.61333 6.06897 7.93333C6.06897 7.93333 7.44828 4.29333 7.54023 4.10667C7.54023 4.29333 8.55172 11.2 8.55172 11.2C10.8506 11.2 12.1379 9.70666 12.7816 8.12L16 0C13.6092 0 12.4138 1.58667 11.7701 3.26667Z" fill="currentColor"/>
</svg>
Hi Rory,
Appreciate the help here. Unfortunately im a novice and not sure how to apply your suggestion to my website.
Are you able to help by using the link? - Webflow - Everall Design | Multidisciplinary Design Studio in London, UK.
Best,
Sure, no problem!
-
Replace the logo with an embed element
-
Place this piece of code inside it:
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" viewBox="0 0 1000 1000"><defs><style>.cls-1{fill:currentColor}</style></defs><g id="Layer_1-2"><path d="M709.48 376.7c28.69-28.69 26.58-58.61.53-84.65-25.88-25.88-54.75-26.59-83.26 1.93l-16.03 16.01 82.73 82.73 16.03-16.01ZM693.79 607.6l-82.73 82.73 16.01 16.03c28.52 28.5 57.39 27.8 83.25 1.93 26.06-26.05 28.18-55.96-.53-84.65l-16.01-16.03Z" class="cls-1"/><path d="M500 0C223.86 0 0 223.86 0 500s223.86 500 500 500 500-223.86 500-500S776.14 0 500 0ZM359.67 772.37 236.46 649.15l88.01-88.01 19.88 19.9-64.24 64.24 29.75 29.75 59.5-59.49 19.71 19.71-59.49 59.49 33.97 33.97 65.47-65.47 19.9 19.88-89.25 89.25Zm69.35-435.61-65.47-65.47-33.97 33.97 59.49 59.49-19.71 19.71-59.5-59.49-29.75 29.75 64.24 64.24-19.88 19.9-88.01-88.01 123.21-123.21 89.25 89.24-19.9 19.88Zm73.74 197.81c-19.09 0-34.56-15.47-34.56-34.56s15.47-34.56 34.56-34.56 34.56 15.47 34.56 34.56-15.47 34.56-34.56 34.56ZM609.14 271.1c39.42-39.42 84.65-45.23 125.85-4.05 39.59 39.61 36.42 88.19-2.83 127.44l-42.59 42.59-123.21-123.21 42.78-42.78Zm126.19 462.18c-41.19 41.19-86.42 35.38-125.86-4.04l-42.76-42.78 123.21-123.21 42.59 42.59c39.25 39.25 42.42 87.84 2.83 127.43Z" class="cls-1"/></g></svg> -
Set the font color of the embed to “#0a0a0a”. This will make it the color it should be.
-
Animate the text color of the logo to the color white.
-
Do the same as step for but in reverse for the second click.
And voilà. You now have a color switching logo!
Hi - Thank you so much for this detailed response, I really appreciate you taking the time to break it down.
-
After I add the embed code and the embedded logo appears - it disappears again when I delete the previous logo.
-
I also need the logo to push back to the Home page.
Would you be able to upload a Loom video or similar showing your process for making this work as I’m stumped!
Thank you again for your patience.
Best,
Jamie
No worries, I noticed you missed the currentColor fill inside the svg logo. Also, I forgot to mention that you have to give the HTML embed a width and height.
It’s kind of a messy Loom video, but you’ll get the point. Let me know if it works!
Thanks that makes a lot of sense and has almost worked. The only issue I have now is that “HTML Embed” isnt appearing in the list of elements in the dropdown inside the colour button animations.
Nevermind! Perseverance wins. The video was a little skippy and was difficult to make out a step which i was missing. User error.
That has worked perfectly. Thank you so much for your help with this. Very grateful.
Best,
Jamie
1 Like
No worries! Glad it works 