Navbar Menu doesn't remain fixed on Mobile

Design help General
1

Hello,

I’m trying to solve this issue for a long time now and I hope you can easily help me. I have this Navbar Menu that open on Mobile after clicking on the hamburger on the top-left corner. Everything works fine when I open the menu on static page that have height:100vh and with:100%, but when I open the menu on some pages have a long scroll the social icons at the bottom doesn’t show up and the elements doesn’t remain fixed to the top.

I attach you a demo GIF on what happen.

ScreenRecording_11-13-2018-14-50-40
ScreenRecording_11-13-2018-14-50-40450×800 2.33 MB

Hope you can help me. Thanks in advance!

Here is my site Read-Only:https://preview.webflow.com/preview/niccolomiranda?utm_source=niccolomiranda&preview=f99439921c61c4335034ebc97b498bf8

2

I can’t replicate what your video shows. Can you try getting rid of flex box so it just displays the links in order? You can then also make the menu position relative and position the icons at the bottom with absolute positioning.

3

Hi @DFink and thanks for the quick reply. I tried to follow your instructions but seems like nothing change and the menu button don’t cover the full viewport.

You can replicate it here: niccolomiranda.webflow.com/about using you smartphone.

Hope you can help me with a quick video.

4

I think It has to do with you setting your nav to fixed. Is there a reason why you did that?

5

Not really. I just want the final result to be that from Mobile and Tablet the Navbar disappears when I scroll down and appears when I scroll up.

6

Hi @niccolomiranda, thanks for your additional info. I am not clear what you are trying to do, here is what it looks like for me:

https://cl.ly/56d370b6f42a/Screen%252520Recording%2525202018-11-25%252520at%25252009.36%252520PM.mov

I would probably recommend a while page is scrolling interaction to open and close the menu or use a when scrolled into view for some section to trigger the timed animation that targets the menu.

I might not be completely understanding the issue, but the menu looks fixed to me already, however the ios menu bar resizes, that is typical ios behavior.

1 Like
7

Hello @cyberdave and thanks for your reply. You can’t see the issue because is fixed right now. I’ve discovered that it’s a recurring mistake with menus taking the full viewport.

BTW during this days I’ve found several old topic like this where you helped people with the same issue here @cyberdave Help creating full-screen mobile nav - #5 by cyberdave and even you @DFink here How to prevent body from scrolling when modal window open where you’re looking to find out a solution like me. Hope this can be help for others and thanks again both anyway