Fixed navbar separates from top of browser on Chrome for iPhone Fixed navbar separates from top of browser on Chrome for iPhone google-chrome google-chrome

Fixed navbar separates from top of browser on Chrome for iPhone


I used a tricky way to cover this gap,
I set padding-top:100px to the nav, and then margin-top:-100px,
so when it happened again, the gap would be filled by the padding-top.

It works fine so far, and hope this can help you, too.


OK, so I've had the same problem, of having a space before the entire contents of <body> in chrome, the solution found in the end? I had a space ' ' symbol at the start of the doc, before the <!DOCTYPE html> tag, removing it fixed everything.

Could not believe it.


This is not a solution, but adding a white bar above the element will improve the situation by preventing the content from peaking through:

.fixed-header:after {    content: '';    position: fixed;    top: -20px;    height: 20px;    width: 100%;    background-color: #fff; // whatever your nav background color is}