Hi everyone! So I am having this odd thing happening to the fixed header of a website I am working on. The header stays at the top of the screen when viewed on desktop but if viewed on mobile, the header jumps a bit when you scroll up or down on the page.
I have tested the site using Firefox, Chrome, and Safari on desktop and the header remains fixed.
On mobile I have used Safari and Chrome and the header does not stay fixed.
What is causing the header to move if viewed on mobile? Any help would be greatly appreciated.
Here is a link to a video showing what I mean:
Here is the relevant code as well.
HTML:
<!-- Header -->
<header id="header">
<h1>
<a href="index.html"></a><a href="index.html">World Valve Co., Ltd.</a>
</h1>
<nav>
<a href="../valve.html">日本語</a>
<a href="Valve.html">English</a>
<a href="#menu">Menu</a>
</nav>
</header>
CSS:
#header {
-moz-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
background-color: #1A3F79;
height: 3.5em;
left: 0;
line-height: 3.5em;
padding-top: 4px;
padding-right: 1.25em;
padding-left: 1.25em;
padding-bottom: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
Thanks again!