After spending 4 hours trying to solve this problem, I've hit a roadblock. I'm attempting to create a responsive menu where the dropdown appears below the navbar when the hamburger menu is clicked, instead of overlapping it like in the current snippet.
<body>
<nav class="nav">
<img src="./img/logo.png" class="nav__logo" alt=" logo." />
<ul class="nav__menu">
<li class="nav__item"><a href="#" class="nav__link">link1</a></li>
<li class="nav__item"><a href="#" class="nav__link">link2</a></li>
<li class="nav__item"><a href="#" class="nav__link">link3</a></li>
<li class="nav__item"><a href="#" class="nav__link">link4</a></li>
<li class="nav__item"><a href="#" class="nav__link">link5</a></li>
<li class="nav__item"><a href="#" class="nav__link">link6</a></li>
<li class="nav__item"><a href="#" class="nav__link">link7</a></li>
</ul>
<div class="hamburger__menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
<script src="script.js"></script>
</body>
I've attempted using z-index to achieve this, but adding a negative z-index to the menu prevents me from clicking on the links.