Hello Guys,
I am trying to override a symbol instance (replacing image) when the screen size gets smaller in the same breaking point and across smaller breaking points.
I included a video to better explain what I’m trying to achieve:
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
I don’t think images can be changed based on breakpoints. What you wanna do is set “Image” (with the black logo) to only show for PC or higher.
Duplicate “Image”, give it a second style with the white logo. You wanna set that one to only show for tablet or below.
As for the other more complicated thing, I don’t think scrolling animation would work because your website is still vertical, not horizontal. You probably need custom code. Unfortunately I don’t use that, can’t help you with that. Hopefully someone else can answer if it’s possible to do that.
Without custom code, maybe using hidden masks and the overflow hidden function would eventually give the effect your asking for. But it would be kind of complicated to do.
Ultimately, if you don’t find a solution, you could just change the size of the black background on PC and higher, so it never actually touches the image logo and therefore removing the need for this animation. Or maybe put a background on the image/nav bar itself.
Hiding or showing elements is made on the very first style option, this row of 6 buttons:
With the Desktop breakpoint selected, click on your white logo and set it to Hide (this is the 6th button).
Now with the Tablet breakpoint selected, click on your white logo and set it back to “inline-block” (4th button). Click on your black logo and set it to Hide (6th button).