In webflow on my navbar I have a dropdown toggle list (imported from relume) -- I can get the text block and drop-down chevron link to change colour on hover, but only indirectly, I'd like them to both change when you hover over either...any ideas please?
you would have to use Webflow Interactions to change two separate elements on hover of a single element.
If you know CSS, you could do it that way as well. If you need more info than this, let me know.
Thanks Matt. What’s best to wrap text and an icon in? When I tried doing this, I couldn’t seem to access the properties of the elements when setting the action against a link box? Do I need to change the opacities (and have two sets of coloured elements) or is there another way? Is doing it via css a lot more efficient? Thanks!
Ah for that, I would use SVG's for the icons as embeds and that way the icon will inherit the text color of its parent element. In this way, you can change hover text colors like you would normally and both the icon and the text will change to the same color. But if you want them to change to different colors - say maybe you have on normal state an icon and text that is gray and on hover you want the icon to be orange and the text to be black. You would use CSS to most efficiently change this. Otherwise if you want to stay within Webflow - you'd use interactions.
For icons, you can check out our library of ready-to-paste icons here:
https://icons.relume.io/
If you have specific icons in Figma, you can right click the icon and "Copy as SVG" and paste that into webflow if you have the Relume chrome extension on, and it'll create the embed for you with the right parameters to do what I am saying.
If all of this sounds like jibberish to you, I can do a quick video for you this evening on the process too.
Here is the example of some CSS but likely not exactly what you need.
<style>
a.button:hover {
color: #000;
}
a.button:hover .icon {
color: #FF0000;
}
</style>