Streaming live at 10am (PST)

Problem scrolling long menus on mobile


#1

Hello All,

I am having an issue with adding a dropdown into my navbar. It is too long with the dropdown selected to fit on a phone and there is no way to scroll without it going back to the main page. Is there some kind of fix to this?

https://webflow.com/design/cad?preview=8db6b6b4a108aa7ec50b0d7e0a72ad74

Thanks!


#2

Anyone? This seems to be a major limitation of adding dropdown menus. What is the point of having the ability to show and hide menus in a dropdown if you cant scroll down on mobile to use them?


#3

I don't see this as a major limitation. You've got to design a mobile experience that's easy and straightforward. Mimicking the desktop design in its every flaws, like double level dropdown menu, is not the best practice, it's a bit painful to browse.

You can design a menu specific for mobile use and make it appear on lower devices. Bring everything to the same level and allow it to fit all in one screen. No scroll, no more inside dropdown.


#4

I know this is your opinion but not everyone shares it. I have seen many sites with drop down on mobile that function great. Regardless, when you have a well paying client that wants that, you must deliver if you want to get paid.


#5

Just stuck with the same problem of long menu lists. I totally support DFink.
Why can't we scroll dropdowns from the navbar on mobiles? If by default that's not supported it could have been explicitly explained in the Help popup.

Vincent (or whoever),
Could you please provide some nice examples of mobile specific menus with many items?

As a solution for now in my case I only see adding extra nav links with display none/inline block - depending on the viewer device.


#6

You can also create the navbar using divs and create submenus like i did at www.canalalarm.com


#7

I created a site a while back with a dropdown within the menu and never thought anymore about it as it worked flawlessly on mobile. The menu allows you to scroll down the page and when opened even the dropdown allows you to scroll it so you can get all the way to the bottom, even when it disappears off the bottom of the screen.

Now though, when I create a menu with a dropdown it refuses to scroll on mobile so that half of the menu is chopped off and the site refuses to scroll down so I can see more.

Did webflow take this functionality out or is my original site possessed? I've tried everything to mimic the original sites menu on all my latter sites but no matter what i do it refuses to scroll anymore. Only the original site's menu is working properly.

What gives?


#9

not sure if it's the same problem
- but I've come across something similar in the past

if there are to many options
- they will fall off the bottom of the list
- and you cannot scroll to them

the only way I could fix this
- was to reorganize my menu structure

(re) design and conquer


#10

Hey guys, This demo may be helpful:

Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Scrollable Mobile Nav Menu

Let me know if that helps at all. smile

Edit: Test link http://demokit.webflow.com/navigation/scrollable-mobile-nav-menu


#11

How did you do that? Do you have a link to try it on touch devices?

Thanks


#12

@thewonglv I struggled with this issue as well (in particular Landscape Mobile).
In the end I simply reduced the font -- but I would still like to know why my setup (which very closely mimics your demo) isn't producing the nav-scroll-bar, what am I missing? (I currently have only 3 nav links, but due to the font size they should produce a scroll bar)

my example: https://preview.webflow.com/preview/s10resto?preview=8cb2438140089043df20df9a6602ea7e

**BTW, to see the issue, you have to go to the page in a mobile browser not just preview in Webflow
http://s10resto.webflow.io
(you can also see it doesn't scroll when you open in desktop browser & use chrome dev tools to set the mobile emulation)

thanks,
Mike


#13

Hi @misterkak, thanks for your question.

I am taking a look at the example you provided vs the example in the demo kit smile

Another solution is to change the font size from using pixel units to vw units. So instead of 100px font size on the nav links, change it to 10vw. This way there will be no overflow.

Look at each viewport the "nav main menu links" class and set the font size to 10vw. Now, the font should resize itself consistently from desktop to mobile.


#14

Having the same problems here. Long menu is stuck on iphone and scrolling down only affects the background (body).


#15

@thewonglv I am getting an error while trying to load the demo you showed. Was really hoping to view how you built it.
Thanks!


#16

As I have mentioned in my own forum posts regarding this problem - the “Scrollable Mobile Menu” on the demo site works as long as there is no other content on the site. As soon as I add sections and content, the scrollable menu stops working.

It would be great if the Webflow team could look into this problem and offer a solid solution regarding the implementation of mobile menus!


#17

Seriously, it is a big issue. and why have a menu if theres no content on a page? I may have to manually create a nested menu like i have done in the past. Hey webflow guys, any chance you can figure out a fix for this very common issue?


#18

FYI. Complete tutorial on how to do this https://forum.webflow.com/t/tutorial-make-mobile-menu-scrollable/28917


#19