My understanding was a symbol could be used on mutiple pages and act the same everywhere. So I made a symbol for my menu bar and dropped in two pages (services 1 and 2). Thing is, the brand link (logo) to the home page only works on the desktop view for the home page. On the other pages, it only works when in tablet or smaller.
Also, it appears to me that the logo actually moves inward on the other pages I used the symbol on vs where it is on the home page (the Physical Therapy and Occupational therapy links are the only ones active). What am I missing or missunderstanding?
Symbols turn any element and its children into a reusable component. Any changes made to an instance of a symbol will update all instances of that symbol across your project.
In your case create a symbol from all unit of the navbar (You put your symbol each time in difference wrapper = the design “move” over pages).
Example of a footer (root tree)
Click twice (Get inside):
EXAMPLE:
Each time the symbol change depends on the wrapper:
(edit - see next post - I figured some stuff out but I don’t yet fully understand it)
Hm, so that would affect the layout? I’ll look for that and make sure my wrapper designation is the same.
The issue though is within the symbol (as far as i can tell) where the “Link” back to the home page (all aspects of which are in the symbol) works in all views on all pages, except desktop view. There it works on both of the service pages, but not on the home page.
The parent element of a symbol does not affect the functionality of a link/symbol, does it?
Ok, interesting. So I “sort of” figured it out. Looks like it is a positioning error. So related really to what you were saying. The link is still functional and there (on all pages), but I must have changed the positioning or padding or something to position an element so that the actual link is at the very top and above of the logo (link) itself.
So this clearly is a layout out issue. What I guess I don;t understand is, if I use an absolute position, vs the padding, or margin to move elements, does it visually move the element but leave the “place holder” (ie. the actual link) in the original space? Actually I seem to recall a video saying that is exactly what it does sometimes.
I seem to (sometimes ) use large padding or margins to move elements. Maybe this is bad practice, not sure. Is is obvious to anyone here with more experience than I to see what I did that caused this to happen?
Start from Zero. Create one and only one main navbar (without any non-symbol parents - and thats it).
Get inside this templates and see how it works:
Absolute positionVSpadding/margin - in general you get the same result (If you use left: 50; or margin-left:50;) - but most of the times for Absolute elements its easier to work with top/right/bottom/left.
