Next JS with Next UI - android navigation bar overlapping problem

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

Related Post