Streaming live at 10am (PST)

Mobile navigation layout issues

Hi all,

I’ve been working on this site for a while and keep putting off fixing my mobile nav.

I’ve centred my main nav on desktop and pushed the other contact links over to the right, however I am unable to work out how to adjust the layout of the contact links on tablet and mobile so that they appear as part of the open mobile menu.

https://preview.webflow.com/preview/nfs-test?preview=9f6d5e3460cfbe88d4d18fbddd861d6a

Hi @davidjayukay

One approach is this:

  • On desktop - copy/make another contact/phone link and add those to the other nav links in the ‘nav menu col’
  • Give those new two a combo class ‘mobile’ - then in settings make them tablet/phone display only
  • Then onto the current desktop contact/phone - give those a combo class of ‘desktop’ and in settings, make those only viewable on desktop

Let me know if that helps!

Stu

Thanks @StuM that makes total sense! :slight_smile:

One of thing, can you understand why my close menu button on mobile is not symmetrical?

Thanks in advance!

Funnily enough I was just building one the same last week!

I had to play around with it a little - my guess is that top line, reduce the move down about 1px, and the bottom line reduce the move up the same…

@StuMI thanks just moved the line down and it worked, Not sure why tho? :/.

One last thing and I will be eternally grateful… How do I animate the links in the mobile nav in one-by-one?

E.g click the menu icon on mobile and “What We Do” fades in, followed by “Who We Help” and so on…

@davidjayukay - no problem - Webflow wizardry at work!

Here’s an easy way to get it (offline!) - take a couple of matchsticks and lay one on top of the other in an X shape in that slightly off centre way you had. Then move the top one up a little and it will look more centred…

Re: the links - have you built it with the native Webflow navbar or your own custom version?

Thanks @StuM I have used the built in one.

Hi @davidjayukay

I would add another ‘Mouse click - tap’ interaction to the hamburger menu

  • Make sure the nav menu is open (in settings)
  • Then with the hamburger selected, click to add and ‘start an animation’
  • Then add an effect eg 0% opacity, but right click it to ‘change target’ to the first nav link
  • Add another opacity of 100% with a timed delay to achieve the fade in effect

Rinse…repeat…for the other nav links

If you don’t want the fade in on desktop - you can restrict the interaction to just tablet and mobile.

Let us know how you get on

Stu

Hi Stu, I think the penny is starting to drop.

Pretty much there now. Thanks again for your help.

Do you have any projects on Webflow?

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