Fixed Bottom Navbar not fixed

Design help General
1

I have a bad problem whith my bottom fixed nav-menu on my website on mobile devices (edge, chrome). When I load the site with the mobile browsers top and bottom address/menu bar visible everything is in place. When I start scrolling down the browser slides out the top and bottom address/menu bars. Durig the slide out the fixed nav-menu sticks to the bottom browser-menu while sliding - fine so far! But after reaching the bottom end (browser menu slide out 100%), the fixed nav-menu starts moving up again to the very point the upper border of the browsers bottom menu was before. I tried out all the stuff Google / Chat-GPT suggests (css, js, etc.) but nothing helped.

The weird part is: This happens not everytime but when it happens, no reload helps. The ONLY thing that helps is: opening a new tab, loading any site, go back the website and voila - the menu is fixed bottom now.

To illustrate this behaviour I took a screen video on my IPhone: Fixed Bottom Navbar Problem

Besides that I reproduced this on a simple sandboy setup in webflow: Sandbox

Maybe you have to clear all your browser tabs and try it a few times!

Can anybody help? thanks!!

1 Like
2

Hi there,

When working with fixed navigation bars on mobile devices, regular viewport units (vh, vw) can cause layout issues due to dynamic browser toolbars. As users scroll, these toolbars may show or hide, changing the visible viewport area and potentially causing your fixed navbar to shift or extend beyond the visible area.

To solve this, use these alternative viewport units:

  • svh (small viewport height): represents the viewport height when mobile browser toolbars are fully visible
  • lvh (large viewport height): represents the viewport height when mobile browser toolbars are hidden
  • dvh (dynamic viewport height): automatically adjusts as the toolbar visibility changes

These units will help ensure your fixed navigation remains properly positioned and fully visible regardless of toolbar state.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like
3

hey, I dont use any viewport related values. the setup I shared is very simple with just 2 divs inside the body.

1 Like
4

@TG89

or get some help form this css value: padding-bottom: env(safe-area-inset-bottom);

hope this will help you

1 Like
5

I found that possible solution too but this does not fix it. I recently tried the same on the github.com page and they seem to suffer the same problem. So assume thats more likely a webkit problem. I created a debug setup and noticed that the visual viewport does not update to full height and instead adds a offsetTop that causes the fixed content to slide away.

1 Like