Streaming live at 10am (PST)

Sticky Navigation not allowing scrolling in menu


#1

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


#2

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.


#3

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


#4

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!


#5

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


#6

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


#7

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.


#8

I am not sure why that would be.

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


#9

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


#10

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:


#11

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?


#12

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.


#13

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.


#14

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.


#15

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 smile


#16

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?


#17

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


#18

#19

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


#20