I have a page with 4 tabs on it, and they function exactly as they should, but I would like the text in the tab itself to change to an image when scaled to mobile so they can be side by side instead of stacked. I know how to do that part, but what I don't know how to do is make the image change color when the current tab changes.
For example, my tabs are green when current, and grey when not selected. The text color inverts with the color of the tab (green on grey, grey on green), but I don't know how to make my image do this.
My first reaction is to upload two images and assign an interaction to each of the buttons, displaying the proper one and turning off the other ones, but that seems like a far too overcomplicated solution and I have a hard time thinking that will work all the time.
If I upload .svgs, is there a way to get them to recolor with some custom css? If so, what would that be?
My other idea was to make my icons into text, like the hamburger icon seems to be in the mobile nav widget, but I don't know how to do that.
Sorry for being long winded... Any help?