Streaming live at 10am (PST)

Nav bar edits having affect over numerous pages?


#1

I am editing the social icons in my adapted "nav bar" on my projects page.
However the last two mobile platforms (mobile portrait and landscape) when I move the icons to span across the top of the page it affects the nav bar in those platforms on my homepage too.

They are "Symbols", maybe that has something to do with it?

https://preview.webflow.com/preview/rachel-campbells-dandy-site?preview=a2995dbf1ef6838f6e6e2d4d833644a2


#2

Oh yes! That's the very definition of Symbols.

A Symbol is a representation of an object. If you edit a symbol (double click on a "green" element) then the changes will instantly propagate to all of its occurrences. Meaning everywhere the Symbol is. That's why we use them for menus: menus is on every page and it would be cumbersome to have to edit all pages when you need to change the menu.

However it's often the case that you need to have a different look for certain devices. It seems to be your case.

To achieve that, you have 2 major ways:

  1. have 2 different symbols for menus. One for desktop and tablet, one for phones. You will place the 2 symbols on each page but hide one for phones and the other for desktop and tablets
  2. have one unique Symbol for menu (better solution) with different elements inside it for desktop and phones. You will hide the desktop and tablet elements from phones and hide the phones elements for desktop and tablets.)

#3

I checked your site I can make some recommendations about how to handle your menu.

Right now you're using 4 symbols, one for each menu item. It could be easier than this.

As your menu only have 4 entries, you could get rid of the "hamburger" menu and show them at all time for mobile, for example... or you can tell me how exactly you'd like the menu to look like on phones, and I'll show you how to make it work with only one symbol.


#4

@vincent Of course thank you so much!!
I think I'll make a menu for desktop and tablet as separate symbols.

I do really like having all socials visible on tablet;)

Thanks for linking the dots - appreciate it!


#5

Hey @vincent I was wondering if you might know what's up with my hamburger icon though?
When opened across all platforms it jerks?

https://preview.webflow.com/preview/rachel-campbells-dandy-site?preview=a2995dbf1ef6838f6e6e2d4d833644a2


#6

You're welcome.

Yes, it's very good to have that. What I was proposing was to have them visible at all time, even on phones.


#7

When you say it jerks, you mean when you click it, it jumps a bit to the left? Yes I see that.

How about that: instead of trying to fix it, can I show you how I would achieve a fully functional menu, from scratch?

I'd use only one symbol I think. And maybe have a different approach. At the moment, your menu won't really work great on phones because it's very high. Way too tall for the landscape phone, and maybe also for the portrait phone. You want your visitors to be able to use your menu very easily. It's important to make things very easy for mobile visitors, with as few interactions as possible.

I'm going to do it and record it as a screencast. Will be back in a few.


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.