I was making changes to my project and when I checked it over my responsive navbar was no longer above the hero text. Ive tried a lot of things but nothing seems to work.
header {
background: url('/images/jellyfish.png') no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
min-height: 100vh;
color: var(--white);
}
.content {
margin-top: 10rem;
animation: introLoad 1.9s forwards;
}
@media only screen and (max-width:920px) {
background-color: var(--darker-green);
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: 300px;
transform: translateX(100%);
padding-top: 3.5rem;
transition: transform 0.3s ease-in-out;
justify-content: center;
align-items: center;
display: flex;
}<header>
<div class="container">
<div class="nav">
<nav class="navbar">
<ul>
<li>About Us</li>
<div class="dropdown">
<li class="dropbtn">
Clients
<i class="fa fa-caret-down"></i>
</li>
<div class="dropdown-content">
<a href="#">Client 1</a>
<a href="#">Client 2</a>
<a href="#">Client 3</a>
</div>
</div>
<div class="dropdown">
<li class="dropbtn">
Candidates
<i class="fa fa-caret-down"></i>
</li>
<div class="dropdown-content">
<a href="#">Candidates 1</a>
<a href="#">Candidates 2</a>
<a href="#">Candidates 3</a>
</div>
</div>
<div class="dropdown">
<li class="dropbtn">
Sectors
<i class="fa fa-caret-down"></i>
</li>
<div class="dropdown-content">
<a href="#"> Sectors 1</a>
<a href="#"> Sectors 2</a>
<a href="#"> Sectors 3</a>
</div>
</div>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<div class="content">
<h1>All the answers under one roof</h1>
<p>
IT and Tech Recruitment for everything from startups to large enterprises
</p>
<button class="more">Read More</button>
</div>
</div>
</header>Here is the responsive nav when at screen width 920px. The .content is the one that is overlapping my responsive nav. I've checked my repository for unsaved changes but I must have committed regularly.