Streaming live at 10am (PST)

Mobile navbar issues


#1

Hi

Is their a specific method to creating a drop down nav bar for mobiles and tablets that avoids that annoying side effect of when u press on a nav bar drop down link and it selects either the link above it or the first link in the drop down list.
This i find very frustrating, you have to be very careful when selecting links on a mobile or tablet.

Is the cause of this to do with the size of each nav link (font size, line height)?


Also i one nav link drop down menu that has many sub menus, around 17. This causes the drop down list to be cut off when it expands, so the last few nav links cannot be selected, their is no way to scroll down a nav link list, or is there??

calaisfs.webflow.io

https://preview.webflow.com/preview/calaisfs?preview=1377508e9e40d228a650b8f1d78750d6

Thanks


#2

I'm giving my 2 cents about mobile menu here. Your issues reveal what's known now: drop down menus aren't good at all for mobile, the experience isn't great and Chrome on Android behaves unexpectedly (sometimes on a brand new fresh Lollipop devide, it starts to refuses closing the menu among other weird things. Also the hamburger menu isn't perceived as a menu you must click, and it's located at the top of the screen, unreacheable when you browse with one hand (unless you have those pianists' hands with magnificient thumbs).

So I try the "Facebook approach", limiting to 4 the number of important primary links and put them in a toolbar at the bottom of the screen. The last slot either is a drop-up menu or leads to a section where you can see all the rest by scrolling. Recently did this for a corporate website in Webflow (not yet published).

Even the burger icon didn't make it on the design for the "more" link.

PS: clients absolutely loved this "App approach"


#3

thanks for the reply @vincent, i will definitely consider the 'app approach' in the future.

in regards to my original post, do u know how to enable scroll for a mobile nav bar?
i want it to function just like this site manages to do, http://www.zillow.com/


#4

I don't understand what the annoying effect is (:

Your menu:

Your refs' menu:

compare:

The height of your links is 40px when it should be at least 44px as per the mobile visual guidelines (Ok it's Apples' ones but it's a very good document for all platforms)

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LayoutandAppearance.html

I often go for a comfortable 48px height, and Zillow went to a more than comfortable 50px. Go for 50 if you like what UX Zillow provides.


#5

sorry, its for the dropdown menus, specifically the one labeled 'How Can We Help You'.
How to enable scrolling on that one.

edit: i have increased the height to 44px for each nav link. Still doesn't help the 'phantom' pressing of other nav links, especially when u press on a drop down menu link.

edit2: also the Zillow link example, has scrolling enabled on their drop down menus, its pretty much what i want to replicate.


#6

Amreet don't fight this. A dropdown menu is already not a good practice on mobile, a double dropdown menu is to avoid at all costs. I could find a solution to drag inside but it would just lead to another issue, and another, and another.


#7

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