Menu
I've just started working on a project and have noticed that when testing it in Chrome on mobile iOS, there seems to be an issue with my fixed navbar. What's frustrating is that at first I thought it maybe a bug in the browser but having checked past projects, they seem to have no issues with the fixed property and are behaving as you would expect.
What seems to be happening is that the fixed navbar is being tucked beneath the browsers address bar when you begin to scroll down. I have attached an image to hopefully explain what I mean.
I then thought that it may be a conflict with a script or stylesheet so I have stripped my template to the bare bones and it still seems to be behaving the same.
Has anybody encounted this. Is there a problem with my meta tags. I have tried different options and it still seems to be doing the same thing. Any help much appreciated.
My stripped down code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- mobile settings -->
<meta name="viewport" content="width=device-width, maximum-scale=2, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div style="background: red; position:fixed;
top: 0;
left:0;
width:100%;
z-index: 1030; height: 80px;">
</div> <main class="main-content">
<div style="height: 1950px;"></div>
</main>
</div><!-- /wrapper -->
</body>
</html>
The red navbar is twice the height that you see in the attached image. The top half has started tuck benath the browsers address bar.
806
asked Oct 29 '25 21:10
Actually there is a problem with IOS and position:fixed .. I have solved this way .. I wish I could be useful for you also:
* {box-sizing:border-box;}
body {
height:100vh;
max-height:100vh;
min-height:100vh;
overflow: hidden;
position:relative;
}
#wrapper {
padding-top: 80px;
height:100vh;
max-height:100vh;
min-height:100vh;
overflow-y:auto;
overflow-x:hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- mobile settings -->
<meta name="viewport" content="width=device-width, maximum-scale=2, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div style="background: red; position:absolute;
top: 0;
left:0;
width:100%;
z-index: 1030; height: 80px;">
</div>
<main class="main-content">
test
<div style="height: 1950px;"></div>
</main>
</div><!-- /wrapper -->
</body>
</html>All in it is that I relied on Position absolute instead of Position fixed
51
answered Oct 31 '25 12:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With