CODEWITHSUNDEEP
htmlcss
user38208
user38208

Reputation: 1094

Fixed Header getting cuttoff on Mobile Browser

I have a fixed header for mobile that has the css:

header {
position: fixed;
top: 0;
left: 0;
width: 40%;
height: 70px;
background: #191919;
z-index: 10;
-webkit-transform: translate3d(0,0,0);
padding-top: 10px;
}

This works fine in most browsers but in the Samsung Browser is gets cut or is hidden by the status bar as per the image below especially on scroll

Mobile Header Capture

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 40%;
  height: 70px;
  background: #191919;
  z-index: 10;
  -webkit-transform: translate3d(0, 0, 0);
  padding-top: 20px;
  width: 100%;
  color: white;
}

.content {
  background: red;
  position: relative;
  padding-top: 70px;
  width: 100%;
  height: 150vh;
}
<header class="myheader">My Header</header>

<div class="content">Some content</div>

Upvotes: 0

Views: 1110

Answers (2)

user38208
user38208

Reputation: 1094

It was a simple solution. I added overflow: scroll to #main { overflow: scroll;}, the div container holding the header and the content below and the problem was fixed.

Upvotes: 1

kencol
kencol

Reputation: 57

You might get punished by “The Notch”-feature of newer mobile devices

Please try to set viewport-fit=cover

 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Further properties to handle any adjustment:

  • safe-area-inset-top
  • safe-area-inset-right
  • safe-area-inset-left
  • safe-area-inset-bottom

Reference: https://css-tricks.com/the-notch-and-css/

Upvotes: 0

Related Questions