Content after nav bar goes under the nav bar

content which is supposed to be after my nav bar rather goes under the navbar when i use display flex and position fixed.

my code CSS


.nav {
	display: flex;
	background-color: crimson;
	width: 100%;
	opacity: 90%;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	box-shadow: 0 2px 0 #2F4F4F;
	}

.navlist {
	display: flex;
	}

.navlist a {
    font-size: 20px;
    padding: 20px;
    overflow: hidden;
 }

.navlist a:hover {
  background: gray;
}

HTML
<body>
	<!-- Start of nav section -->
<nav class="nav">
	<ul class = "navlist">
		<li><a href="index.html">HOME</a></li>
		<li><a href="index.html#about">ABOUT</a></li>
		<li><a href="index.html#biography">BIOGRAPHY</a></li>
		<li><a href="index.html#contact">CONTACT</a></li>
	</ul>
</nav>
<!-- end of nav section -->
<main>
	<article>

		<ul>
			<img src="img\singing.jpg" width="300px" height="300px" >
		      <li><strong>1958</strong>-Born in Gary, Indiana, U.S.</li>
		      <li><strong>1964</strong>-Michael and Marlon joined the Jackson Brothers—a band formed by their father which included brothers Jackie, Tito, and Jermaine—as backup musicians playing congas and tambourine.</li>
		      <li><strong>1965</strong>-Michael began sharing lead vocals with his older brother Jermaine, and the group's name was changed to the Jackson 5.The following year, the group won a major local talent show with Jackson performing the dance to Robert Parker's 1965 hit "Barefootin'".</li>
 </ul>
</article>
</main>

</body>

Hi @kartter

That is what happens when you apply position: fixed; because the element is removed from the normal document flow. If you want the element coming after .nav not to be displayed under, consider adding a placeholder div element and give it a height equal to that of .nav.

if i understand you correctly, i should create a div element with no info in it but just give it a height equal to .nav

thanks for the reply.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.