Mobile nav bar behind browser's address bar

The new mobile browsers (Safari & Chrome) on iOS now have the address bar at the bottom. When trying to add the mobile Nav Bottom Bar from the layout components at the bottom of the screen, that nav bar is automatically placed behind the address bar (see the screenshot below). The way I know it is there, however, is when we scroll for a while, the address bar shrinks down and leaves more space for the viewport, and at that point,
I could see the mobile nav bar appear. Is there a quick way to fix this with CSS?

1 Like

@alexlem were you able to solve this?

Yes, within the nav bar section, insert a new div that wraps the entire nav bar. Set its ‘Position’ property to ‘Fixed’ and align it to the bottom of the screen by setting ‘Bottom’ to 0.

Sweet. Worked like a charm!