Streaming live at 10am (PST)

Un-linking one element from symbol automatically un-linked all symbols, is this normal?

Hi everyone,

I have created a div block which nests the logo, styled it etc., to be used in most hero sections on most pages, as a symbol. Then I got to the product template page on this ecommorce project and the hero section is different then all the other once. That means that the logo div which was basically centered in the hero section is now placing the logo in the wrong place. I tried to create a subclass for the logo image and adjust the distance from the navbar in the mobile landscape break point but it also affected the logo position on all other pages at the same break point even though I created a subclass, is that normal? Then I thought I would try to un-link the logo on the product template from the symbol to style it separately from all the other once, turns out this move un-linked the symbol on all instances it has been used across the whole website, is this expected behavior? I just wanted to un-link one logo and leave all others as the original symbol. The weird thing is, when I go to the add elements tab to add symbols, it shows that the logo symbol is still being used in 9 instances even though all logo symbols have been automatically un-linked, I don’t think this is supposed to happen, right?

So basically, if a symbol has been used lets say 10 times in a project (10 instances), will un-linking one of them cause all of them to get un-linked automatically, or should there still be 9 of these “symbols” (9 instances) in place with one “un-linked” stand alone element which used to be part of the initial 10 symbols (same symbol, 10 instances)? Can someone please shine a light on this?

Thanks in advance

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Any modification that you make inside of a symbol will be repeated on all instances of the symbol. That’s the rule.

But unlinking a symbol on one page, to design the element that was inside (and now just an element), doesn’t unlink all the other instances of the symbol.

Can you reproduce what happened in a screencast?

Thanks so much for your help vincent, really appreciate that. Honestly, I am new to this and have never made a screencast, researching that now, maybe you can make a quick suggestion how I can do that, that would be awesome.

OK, this is beyond weird. I have just been away from the laptop for a while. Just came back, read your reply and was going to take a screen shot of the navigator to show you what I did. So I click on the navigator button and see that all the “other” instances are linked together again. I am 100% sure that they were unlinked before, I checked on almost all of the pages and sure enough they were unlinked, then I wrote this post. After that I also refreshed the browser, still linked the way they should be. But, I have found another issue now. The subclass I applied to the logo image on the product template page, has automatically been applied to all other logo instances, is that also normal? If I remember correctly I tried applying the subclass to the logo image before I unlinked it from the symbols, is that why all the logo images would have that same subclass now? Actually, I didn’t have the logo as a symbol, I had a div as a symbol, which nested the brand link block which nested the logo image, so not sure if that should effect the logo image class that way because it has never been a symbol directly, or does that matter? What’s the point of doing sub classes then if they will all have them anyways? Or is that an actual problem?