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
StuM
January 23, 2018, 11:00am
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
Thanks @StuM that makes total sense!
One of thing, can you understand why my close menu button on mobile is not symmetrical?
Thanks in advance!
StuM
January 23, 2018, 12:59pm
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…
@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…
StuM
January 23, 2018, 7:51pm
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?
Thanks @StuM I have used the built in one.
StuM
January 24, 2018, 1:30am
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
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?
system
(system)
Closed
May 29, 2018, 12:30pm
10
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.