Sticky Navigation not allowing scrolling in menu

My navigation isn’t scrolling after I made it a sticky nav bar. It was scrollable, but now when I try to move down the menu list I can only see a snippit of my menu items.

https://preview.webflow.com/preview/os-voices?preview=e231e45117acb5e3d0ab93d47d78ee15

You’ll have to set your overflow to allow scrolling, then you can have the sticky menu and be able to scroll through the options.

Thanks, LJB, I tried that and noticed that it doesn’t let me scroll all the way down my menu when that option is selected. Some of the nav links are displaying.

https://preview.webflow.com/preview/os-voices?preview=e231e45117acb5e3d0ab93d47d78ee15

Just noticed that too.

I was able to fix it by unchecking the “menu fills page height” option, and making the height of the menu 100% and increasing the z-index to 15.

Hopefully this works for you, let me know!

What you suggested definitely works on the desktop and my mobile, but it doesn’t work on my tablet in the portrait view. When I was adjusting everything it worked in the designer preview of the site for the tablet.

https://preview.webflow.com/preview/os-voices?preview=e231e45117acb5e3d0ab93d47d78ee15

Just tried it on my tablet and everything worked great! What kind of tablet are you using?

I’m on a iPad Mini. Let me try it again and see if it just took awhile it to load.


Just checked and it still isn’t working for me on mine.

I am not sure why that would be.

@cyberdave @PixelGeek any chance you’ve seen trouble with navigation on iPad mini before?

Hi @angierosie, try to set the navigation bar on tablet portrait and lower, from overflow auto to overflow visible.

See my video, does this help?

Cheers,
Dave

So I tried what you suggested and it definitely works in the preview, but when I go on two different iPads, one big, the other a mini, I still get the cut off menu in the tablet portrait view. I’ve attached to new photos of the screens.

iPad Mini:

Regular iPad:

Forgive the weird office background noise:

Hi @angierosie, thanks for the update. Could you make a slight change to the style of the NavMenuHolder at Tablet Portrait view, to set the values as in the screenshot below, for the fixed positioning and offsets:

After making that change, could you try to re-publish and then check it again?

Still didn’t work.

Looks like someone got into our site though and made a lot of padding changes, colors, and the different z-indexes.

I had the same problem with my navigation not scrolling and this solutions seems to work for me as well. However, I did not excessively test it yet. Will post my results soon.

1 Like

Hi @angierosie, this is still under investigation as it also has to do with iOS and how touch movements are handled in iOS.

This issue of not being able to scroll a fixed div with auto scroll on iOS has been reported by others in the webdev community and I am still doing investigation on this.

Thanks for your patience.

Thanks for looking into this, @cyberdave! I’m glad that it’s at least working properly on desktop, landscape tablet, and portrait mobile phone. I’ll be very content when it works across all environments :slight_smile:

1 Like

Is there a way to make the navigation a permanent fixture on the side of the page like http://www.overtongraphics.com/ only on the desktop and still have the navigation work for mobile devices?

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

A post was split to a new topic: Need help with scrolling in fixed navbar and issue with dropdown shadow settings