How do I make JQuery toggle not move elements around?

I'm trying to make a responsive website menu which is openable with a burger (3 lines).

I've got the menu to open but it keeps moving the burger up and down in order to make way for it.

How do I make it so you click the burger and it stays in the SAME PLACE whilst opening the menu and playing its animation?

<div class="burger" id="burger" onclick="openBurger(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
</center>

JS

function openBurger(x) {
    x.classList.toggle("change");
}

$("#burger").click(function() { 
$("#nav").toggle();
});

Burger

As you can see, the burger bumps down to make space for the menu.

Thanks.