Nav Bar Colour Issue

Like many websites, I need a light and a dark navigation bar. Rather than having to make all the changes twice, I wanted to take the Nav Dark (used as the master) copy it, and then edit the copy for the light background.

I copied it, gave it a new name “Nav Bar 2” but any changes I make to Nav Bar 2, also change on Nav Bar (Dark BG) and vice verse. Why? How do I fix this?


@BluBot Are you changing the classes inside the symbol? If you are editing the styles but using the same classes, they will change in both symbols.

1 Like

You have to build it all again and then name it differently. I did the same thing. I really wish there was a disconnect button for the symbols.

@java_I_tess there is, right click on the symbol and click “Unlink from Symbol”


Or use Shift + Cmd + A

1 Like

Hi @BluBot Andrew, follow the steps that @sam-g and @java_I_tess have provided you.

You could also copy the symbol onto a blank page, unlink it from the master nav bar, then duplicate each class that is within the nav menu to something like ‘[old class name]-dark’, then create a new symbol with these adjustments. And once that is done, setup your interactions as you see fit, if you are using them.

Thats the easier way!

Happy Designing,