Using symbols to update my nav on mobile?

Hi there

Im trying to use symbols by just dragging and dropping the symbol “nav” on to each page so it looks good on mobile… it does not seem to be working…

I also noticed I need to update my logo on the mobile versions as it goes to the template one at the moment… is there a way I can use symbols to do that as well for the mobile version? see the read only link

https://preview.webflow.com/preview/mcs-customer-sage?preview=0553688b41289acc968b95275d052b9e

Thanks

Here is my public share link: LINK
(how to access public share link)

Hi @mattmcs

Symbol is basically “chunk” of HTML code. By creating/using symbol you just copy/paste this chunk to another part of the site (page, section, etc)

If you didn’t styled correctly navbar for mobile view before creating the symbol, it will not look correctly on that place where you paste it. And if you will go inside the symbol (double click on mouse) and edit navbar style as you want it to look, it will automatically update look on every place where you paste this particular symbol.

You do not need to create separate symbols for desktop and mobile versions. Except situations when mobile and desktop versions contain different elements.

Hope I was able to explain :smiley:

Regards,
Anna

Hi Sabanna,

Thanks … I get how it works

My problem is applying to every page… its not working … currently what Im doing is

  1. I have a symbol called “leftnav” I have it compleltly styled on mobile, tablet and computer the way I want

  2. I then go to another page and drag and drop that symbol over the current nav to replace it and nothing happens…

https://preview.webflow.com/preview/mcs-customer-sage?preview=0553688b41289acc968b95275d052b9e

What am I missing? or doing wrong for it to work?

Thanks

Your “Leftnav” has settings: do not display on tablet and mobile

There is “nav-device” appear instead.

Is it should be like this or now I miss something?

Hi Sabanna

It was setup like that in the template… so whatever we need to do to make the nav show exactly as I have it except as a hamburger button drop down on mobile would be great…

Thoughts?

Thanks

Well… there is a little bit mess inside the “nav-device”, you will have to remove symbols, which sit inside that navigation. Then create one more symbol from “nav-device” and use it on all other pages.
Here is video how you can do this (for delete symbols I just press “Delete” button on my keyboard):
https://nimbus.everhelper.me/client/notes/share/video/352056/4CK9Xlp2ol4ZLv9Wim667y1VRfavac5P/none/s251450201444421/video.webw

Thanks Sabanna, but I cannot see the video… see attached as to what I see…

Just a white screen

I am sorry, try this link http://nimb.ws/dFxpVU

Sorry same issue on that link too… I tried in chrome and safari

Ok, I am sorry, tried new app for screencast. I will be back to computer after couple hours and will create new video.

Np thanks Sabanna I appreciate it

Sorry for late reply. Here is a new video: https://drive.google.com/file/d/0B-7cg8BSq1Z_UGxOR3djZzZrWjQ/view

Awesome thanks a lot it works really well now… adding it to all the pages now.

Hey Sabanna one thing I noticed though…

I updated all the pages the way you showed me…

Except my nav doesnt fully show on mobile as it does on computer its missing 3 links… see attached…

Is there a quick way to fix that?

Thanks

If you see attached on my phone… it gets cut off… any thought why?

Thanks Sabanna

Any thoughts on this all?

Hi @mattmcs,

I see the reason, but still can’t figure out how to fix it :confused: I am sorry

Ok are you seeing the same as me?

Do you think its because the menu is too long?

There is overlay div, which appear only when menu is opened. That div is part of navigation widget and it is creating automatically. It has height=100% of device and overflow = hidden, that’s why menu keep “cutting”. I can’t figure out how to control this

Hi @mattmcs

The menu is indeed too long. Try using less links. Also, when a user is scroll down, having a cut off logo is fine because users are more focused on finding the information they need, than always being reminded which website they are on.

Cheers,
Nelson :slight_smile: