Streaming live at 10am (PST)

Responsive Nav Issue


#1

Site:
http://idx.webflow.com/
https://webflow.com/design/idx?preview=49272e5eddd961c1e9635527c477d2ab

I am having an issue when I am pulling up my nav on a mobile device. If you take a look at it on mobile and pull in the nav you only see some of the items. When scrolling down, instead of revealing more nav items it just keeps snapping back to the top.

I have been trying to figure out a way to get this to work and keep my nav the same but its stumping me.

Looking for some help on how I can get it so you can see all nav items.

Much appreciated,
Luke


Problem scrolling long menus on mobile
#2

Hi @LukeB, thanks for your patience. I looked at the case, and this is similar to another post: http://forum.webflow.com/t/dropdown-issues/8717

We do not have support for scroll on that navmenu when opened in dropdown mode. I am sorry about that. We have it on our list of things to update, althought I cannot give an exact ETA for that yet. My best suggestion is to try to layout the content differently on mobile in that menu, perhaps show two icons across instead of one.

Perhaps others who faced this might suggest some design workarounds. For the time being, can experiment with the layout, one that does not need scroll on that navmenu.

I hope that helps, Dave smile


#3

Hi @LukeB, your read-only link seems to be disabled, but from what you described I think this demo may be helpful:

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

Is this what you were trying to achieve? If not, let me know and I can take another look! smile


#4

Unfortunately I don't think that solved the issue unless I am missing something. Not to sure why that link wont work as it is still enabled. Here it is again.

https://preview.webflow.com/preview/idx?preview=3a7d857d56369f563b7fec00ded399f5

Much appreciated,
Luke


#5

Thanks for the link. Can you update your post following these guidelines please? http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Thanks in advance!


#6

Its kind of hard to show in screen shots as the issue is on my mobile devices.

If you open the site up on your mobile device and expand the nav bar, you will notice only some of the menu options are displaying. The site scrolls to reveal new content but the navigation does not. Just keeps snapping back to the top.

If you are trying to recreate this problem on a browser, just minimize it to phone size and you will see it. I am using firefox and chrome.

I believe I was informed this is a known bug that was being looked into. Then suggested for the mean time modify the nav to a more standard layout.


#7

Hi @LukeB, thanks or the screenshots! And no, this is not a bug. Instead, you will need to make some adjustments to your navigation so you can scroll the contents of it.

The demo below shows how you can set up your navigation to allow this:
Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Scrollable Mobile Nav Menu

You most likely will need to change the structure of your elements, though. Give it a try and if you still have trouble, I'll try to whip up a video for you. smile


#8

Yah I will have to recreate it.

No worries though, I shouldn't have a problem doing this. I just wanted to get it fixed for those who clone it. I have already exported what I need to pass along to my team.

Thank you,
Luke


#9