I have a navbar menu which when toggled on android mobile, it is overlapped by android navigation bar.
I have tried to add paddingBottom with safe-area-inset-bottom.
<NavbarMenu
className={'z-50 flex flex-col justify-between'}
style={{ paddingBottom: 'env(safe-area-inset-bottom, 16px)' }}
>
<NavbarMenuItem>
<Link href={Routes.home} onClick={() => setIsMenuOpen(false)}>
Strona Główna
</Link>
</NavbarMenuItem>
<NavbarMenuItem className={'flex space-x-5 pb-3'}>
<AccountButtons isUserLoggedIn={isLoggedIn} onLogout={() => setIsMenuOpen(false)} />
</NavbarMenuItem>
</NavbarMenu>
I have also included <meta>
tag in layout.tsx with viewport-fit=cover
but still it is being overlapped by this navigation bar.
You need to sign in to view this answers
Leave feedback about this