I'm currently working on a responsive website and have encountered an issue with the topbar. When the website switches to mobile layout, the topbar scrolls down a bit before sticking to the top of the screen as intended. This causes misalignment in the layout. Strangely, this problem does not occur in the desktop layout.
#topbar {
font-weight: 300;
background-color: white;
z-index: 999;
position: fixed;
width: 100%;
height: 15%;
box-shadow: 0 5px 10px rgba(124, 124, 124, 0.3);
}
@media (min-width: 35em) {
#topbar {
height: 60px;
}
}<html>
<head>
<link href='stylesheet.css' rel='stylesheet' />
<script defer src='main.js'></script>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
</head>
<body>
<section id='topbar'>
<nav>
<h1 id='logo'>Logo</h1>
<ul id='links'>
<li>
<a href='#home'>
<h1>Home</h1>
</a>
</li>
<li>
<a href='#about'>
<h1>About</h1>
</a>
</li>
<li>
<a href='#products'>
<h1>Products</h1>
</a>
</li>
<li>
<a href='#jobs'>
<h1>Jobs</h1>
</a>
</li>
</ul>
<div id='menu-button'>
<div id='line1'></div>
<div id='line2'></div>
<div></div>
</div>
</nav>
</section>
</body>
</html>