My hamburger button is causing me some trouble. Every time I click on it, the position shifts. I need it to stay in place when clicked.
I have shared all my code on jsfiddle.
const nav = document.querySelector('nav');
const toggleButton = document.querySelector('.menu-button');
const links = document.querySelector('.links');
toggleButton.addEventListener('click', () => {
nav.classList.toggle('nav--active');
links.classList.toggle('links--active');
});<nav>
<a href="#">
<img src="https://www.designfreelogoonline.com/wp-content/uploads/2017/05/000840-Infinity-logo-maker-Free-infinito-Logo-design-06.png" alt="">
</a>
<div class="menu-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="links">
<ul class="locals">
<li><a href="#">Home</a></li>
<li><a href="#">Dining</a></li>
<li><a href="#">Reservations</a></li>
<li><a href="#">Menu</a></li>
</ul>
<ul class="socials">
<li>
<a href="#">
<i class="fab fa-instagram-square"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-twitter-square"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-youtube-square"></i>
</a>
</li>
</ul>
</div>
</nav>