▼
Streaming live at 10am (PST)

Mobile navigation layout issues

Design help General
#1

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

#2

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

#3

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!

#4

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…

#5

@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…

#6

@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?

#7

Thanks @StuM I have used the built in one.

#8

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

#9

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?

#10

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