I am in the process of creating a basic static blog page using HTML5, SASS, and CSS.
While working on the design, I utilized the 'nav' semantic element for a fixed top bar on the page that remains visible even when scrolling down. Additionally, I used the 'header' semantic for a title above the articles but below the navigation bar to keep them separate. However, I encountered an issue where increasing the top margin of the 'header' also caused the 'nav' to drop by the same amount. I am curious to know why this is happening and how can I make sure that the 'nav' stays fixed at the top?
My goal is to position the 'header' above the 'nav' without causing any displacement issues. If there is a better approach to achieve this, I am open to suggestions.
body {
height: 2000px;
font-family: helvetica;
}
nav {
background: #FFE599;
height: 30px;
width: 100%;
position: fixed;
border-bottom: 2px solid black;
}
nav p {
margin: 7px auto;
margin-left: 10px;
}
header {
background: #B6D7A8;
border: 2px solid black;
border-radius: 10px;
text-align: center;
height: 50px;
width: 760px;
margin: 50px 10px 20px 10px;
}<nav>
<p>The Lorem Micro Blog</p>
</nav>
<main class="blog-width">
<aside id="left-side">
<h2>Check out my vertically centered ad!</h2>
<img src="href" alt="" />
</aside>
<div class="content">
<header>
<h1>The Lorem Micro Blog</h1>
<p>By Foo Bar</p>
</header>
</div>
</main>