I have a navbar with position fixed, but in some ios devices it does not show, I googled it and I think it's an issue with the fixed position. So, I changed to absolute, but the navbar goes to the bottom of the page. Does someone know which css proprierty can I pass to centralized it on the top of the page? I'm already using "top:0"

here's the code:

<Header>
       <NewNavbar />
  </Header>

header styled component:

  export const Header = styled.header`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;

  // padding: 0 20px;
  min-height: 52px;
`;

I don't know if this could be another reason of why safari is not showing the navbar component, but the NewNavbar component also has some divs that only is displayed when it's in a mobile size

  {mobileSidebar ? (
          <Grid xs={6} item className={classes.mobile}>
            <Button onClick={toggleDrawerMobile(true)}>
              <MenuIcon />
            </Button>
          </Grid>
        ) : null}

UPDATE !!!! Thanks everyone! I could solve it by giving to the father div the height 100vh !!!