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.
I haven’t look at your site sorry but I can answer this: “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.”
One way could have you place both text and icons where you want them to appear, give each a class, then, for each device, set their display mode (use display:none). You could also try to have the icon be a background of the text element and try to make it appear by setting the display bg off/on and playing with the size and opacity of the text. (I’d prefer the first option though).