Changing color of menu-icon on click

[janx (Jan)]

Hey there!

I am having trouble figuring out how make an interaction work in my design.

I want the “+” to turn white on the dark background of the menu and of course reverse to black once the menu is closed. The Icon is used on the project pages, for example “Project 1”.

The icon is made from two divs with a defined width and a 1px black border and has the rotation applied with an interaction.

Can I somehow change the color of the border with a step in an interaction?
If not, what other options are there? Should I rather use a svg icon?

Any help is really appreciated, because I can’t really figure out how to reach the goal here. Thank you in advance!

---

Here is my public share link: LINK
(how to access public share link)

[DavidFerguson]

Hopefully this code will work, paste it into the footer section of the custom code page in Project Settings

<style>
    .colorswap { border-color: black; !important }
</style>

<script>

    $('.icon-line').click(function(){
    $(this).toggleClass('colorswap');
    });

</script>

Haven’t tested this, but it should work, I think

[janx (Jan)]

Thank you! I will try it out later and post the results!

[janx (Jan)]

Well, it seems that the custom code feature is now a paid feature. At this moment I can’t afford to upgrade but maybe in the future. Might there be another option, or can something like this only be solved with javascript?

[DavidFerguson]

Hmm not that I’m aware of, unless anyone else has any ideas?

As far as I know you can’t set things like this with just CSS unfortunately, although could be wrong.