Кнопка гамбургера перемещается при нажатии

Question

У меня проблема с кнопкой гамбургера. Когда я нажимаю на кнопку гамбургера, ее положение меняется. Я хочу, чтобы он оставался на том же месте при нажатии.

Я разместил весь свой код на jsfiddle.

https://jsfiddle.net/rcs7vfte/

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>

Answer 1

Причиной вертикального перемещения кнопки является появление полосы прокрутки после развертывания панели навигации, мы можем исправить это, заставив полосу прокрутки появляться, даже если панель навигации не развернута. Чтобы исправить это, мы можем использовать:

body 
overflow: scroll

Что касается горизонтального движения, мы можем исправить это, добавив верхнее значение для кнопки меню:

top: 1.3rem

вот ссылка jsfiddle к исправлению: https://jsfiddle.net/6jt4hL9v/