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}