# Hamburger menu animieren

**URL:** <https://forum.pinegrow.com/t/hamburger-menu-animieren/5475>\
**Category:** General\
**Created:** [July 16, 2021, 9:18am UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475 "2021-07-16T09:18:46Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![wgk](https://avatars.discourse-cdn.com/v4/letter/w/3ab097/32.png) [@wgk](https://forum.pinegrow.com/u/wgk)\
**Post date:** [July 16, 2021, 9:18am UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/1 "2021-07-16T09:18:46Z")

</div>

Hello Community,

I would like to animate the Hamburger menu under Bootstrap 5.

I already got the actual animation, but I would like the menu icon to return to its original position as soon as a menu item has been selected.

In my case, the display only goes back to its original position when I click the menu icon again.

You can find the sample at: [Test](http://testumgebung.wgk-server.de/test/#)

I would be very happy about a solution to my problem.

Many thanks!

---

<div class="post-metadata">

**Author:** ![7at1blow](https://avatars.discourse-cdn.com/v4/letter/7/f14d63/32.png) [@7at1blow](https://forum.pinegrow.com/u/7at1blow)\
**Post date:** [July 16, 2021, 11:42am UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/2 "2021-07-16T11:42:09Z")

</div>

Hi wgk,  
I have the impression that sometimes some menu items (for example sometimes while clicking from menu item 3 to 4) - if I understand you correctly - are the way you want them to be. I hope this can help you a little to find the hook.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [July 16, 2021, 1:18pm UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/3 "2021-07-16T13:18:08Z")

</div>

Hi @wgk,  
Basically you need to toggle the open class on the span with a class of menu-btn. Right now, clicking on the button itself toggles the open class, but the menu items do not. You can just modify the JavaScript that you have for making the menu show and hide. Do you want to give a try at modifying the code first?  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![wgk](https://avatars.discourse-cdn.com/v4/letter/w/3ab097/32.png) [@wgk](https://forum.pinegrow.com/u/wgk)\
**Post date:** [July 16, 2021, 1:23pm UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/4 "2021-07-16T13:23:30Z")

</div>

Hello Bob,

thank you for the info.

Unfortunately, I don’t really have a clue about Java Script yet, so I’m glad I got that far.

I would therefore be very happy if you can give me a little support.

Thank you very much!

wgk

---

<div class="post-metadata">

**Author:** ![wgk](https://avatars.discourse-cdn.com/v4/letter/w/3ab097/32.png) [@wgk](https://forum.pinegrow.com/u/wgk)\
**Post date:** [July 16, 2021, 1:40pm UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/5 "2021-07-16T13:40:01Z")

</div>

Hallo 7at1blow,

thanks for your post.

A few pictures to clarify

Desired functionality:  
1.) When the menu is closed, the hamburger is displayed

 ![001](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/570bc6f908a8e1b10560fce079544ce9d6b9f94a.jpeg)

1. when you click on the hamburger, the popup menu opens and the hamburger becomes an “X”  

2. When you select a menu item, you jump to the corresponding anchor,  

and the menu closes and the hamburgers should appear again

 ![004](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/8757a7eb7062bb804d3f72b2e1183add9c79bac9.jpeg)

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [July 16, 2021, 2:39pm UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/6 "2021-07-16T14:39:10Z")

</div>

Hi @wgk,  
This should work for you.  
First - give the span with a class of menu-btn an id of menuButton  
Second - change out your menu-close.js code with:

```auto
let navItems = document.querySelectorAll('.close-item');
let navClose = document.querySelector('.navbar-collapse');
let menuButton = document.getElementById('menu-button');
navItems.forEach(item => {
    item.addEventListener('click', (e) => {
        if (navClose.classList.contains('show')) {
            navClose.classList.remove('show');
        }
        if (menuButton.classList.contains('open')) {
            menuButton.classList.remove('open');
        }
    });
});

```

Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![wgk](https://avatars.discourse-cdn.com/v4/letter/w/3ab097/32.png) [@wgk](https://forum.pinegrow.com/u/wgk)\
**Post date:** [July 16, 2021, 3:09pm UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/7 "2021-07-16T15:09:18Z")

</div>

Hello Bob,

thank you for your help!

I tried to do it this way, but unfortunately it doesn’t work for me yet - have I misunderstood something?

The first time it works, but as soon as I press the menu again, it no longer works for me!

The current version is available as a [test](http://testumgebung.wgk-server.de/test/#) under the well-known link.

Best wishes  
wgk

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [July 16, 2021, 6:19pm UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/8 "2021-07-16T18:19:04Z")

</div>

Hi @wgk,  
My bad - typing too fast without the brain engaged!!  
The id of the span should be `menu-button` not `menuButton`.  
Sorry,  
Bob

---

<div class="post-metadata">

**Author:** ![wgk](https://avatars.discourse-cdn.com/v4/letter/w/3ab097/32.png) [@wgk](https://forum.pinegrow.com/u/wgk)\
**Post date:** [July 16, 2021, 8:37pm UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/9 "2021-07-16T20:37:26Z")

</div>

Hello Bob,

this was definitely a big step in the right direction 🙂

Now when I select a menu item, the popup menu closes and the hamburger reappears.

But there is still one problem: If I now click on the hamburger again to select a menu item, the hamburger does not change its appearance and the change to the “X” is not completed.

Another click and the change works again as it should…

Do you have any idea how to fix this? That would be then as I would wish it.

Thank you very much for the great support.

Many greetings  
wgk

---

<div class="post-metadata">

**Author:** ![wgk](https://avatars.discourse-cdn.com/v4/letter/w/3ab097/32.png) [@wgk](https://forum.pinegrow.com/u/wgk)\
**Post date:** [July 19, 2021, 6:00am UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/10 "2021-07-19T06:00:50Z")

</div>

Hello everyone,

does anyone else have an idea why the menu doesn’t always behave the same way and therefore has “dropouts” every now and then?

I have the impression that only every “second” menu call is executed with the desired function.

Pass 1:  
Menu call changes the hamburger to an X and back to hamburger after closing.

Pass 2:  
Menu call does not change the hamburger to an X and and the hamburger remains unchanged all the time

Pass 3:  
Menu call changes the hamburger back to an X and back to the hamburger after closing.  
etc…

Thank you very much for the support so far!

Many greetings  
wgk

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [July 19, 2021, 9:36am UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/11 "2021-07-19T09:36:47Z")

</div>

Hi @wgk,  
More fun with hamburgers! So, I didn’t look at the code you had added to the page to open and close the menu. I thought it was a normal Bootstrap toggle. So, the reason the opening is getting out of synch is that your other JS is using a variable to keep track of whether the menu is open or not. The closing of the menu by clicking on an item doesn’t change that variable, but clicking on the hamburger icon does. I would get rid of the main.js file and change it to:

```auto
let navItems = document.querySelectorAll('.close-item');
let navClose = document.querySelector('.navbar-collapse');
let menuButton = document.getElementById('menu-button');
menuButton.addEventListener('click', (e) => {
    menuButton.classList.toggle('open');
 });
navItems.forEach(item => {
    item.addEventListener('click', (e) => {
        navClose.classList.toggle('show');
        menuButton.classList.toggle('open');
    });
});

```

I think that should work for you.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![wgk](https://avatars.discourse-cdn.com/v4/letter/w/3ab097/32.png) [@wgk](https://forum.pinegrow.com/u/wgk)\
**Post date:** [July 19, 2021, 12:52pm UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/12 "2021-07-19T12:52:40Z")

</div>

Hello Bob,

Thank you very much for your information:

I have deleted the file “main.js” and changed the file “menu-close.js” according to your instructions.

Unfortunately, neither function works any more.

The menu no longer closes and the hamburger is no longer replaced by an “X” as soon as the menu is activated.

Either I didn’t understand your mail correctly and did something wrong, or there is still a trap in the code somewhere.

You can find the old page [here](http://testumgebung.wgk-server.de/test/) and the new, modified version [here](http://testumgebung.wgk-server.de/test/new/).

Many greetings  
wgk

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [July 19, 2021, 1:09pm UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/13 "2021-07-19T13:09:13Z")

</div>

Hi @wgk,  
I think you forgot to add the id to the button on your new page.  
Bob

---

<div class="post-metadata">

**Author:** ![wgk](https://avatars.discourse-cdn.com/v4/letter/w/3ab097/32.png) [@wgk](https://forum.pinegrow.com/u/wgk)\
**Post date:** [July 19, 2021, 1:59pm UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/14 "2021-07-19T13:59:27Z")

</div>

Hello Bob,

I had only changed the specified data during the last “change”, I had not done anything to the menu itself-.

Now I have given the button the ID “menu-button” (I hope I have understood this correctly) and reinstalled the page on the server.

Unfortunately, I can’t see any change from the previous version.

Have I done or understood something wrong?

Sorry for asking all the time, but I am very grateful for the great support.

Best regards  
wgk

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [July 19, 2021, 2:20pm UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/15 "2021-07-19T14:20:41Z")

</div>

Hi @wgk,  
The id should be added to the the the span with the class ‘menu-btn’ just like above. Sorry I was a little unclear.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![wgk](https://avatars.discourse-cdn.com/v4/letter/w/3ab097/32.png) [@wgk](https://forum.pinegrow.com/u/wgk)\
**Post date:** [July 19, 2021, 3:37pm UTC](https://forum.pinegrow.com/t/hamburger-menu-animieren/5475/16 "2021-07-19T15:37:16Z")

</div>

Hello Bob,

since I’m not very familiar with such things (I’m gradually teaching myself a little bit), I may not have understood it the way you meant it. Even now I had to think a bit about what to do 😉

I have now added the new value to the line: "span class=“menu-btn”.  
So now the line is: “span class=“menu-btn” id=“menu-button”” and lo and behold - it seems to finally work the way I wanted it to.

You have helped me a lot with this and I would like to thank you very much for that.

So thank you very much for the great support and also for your patience. Without your support I would never have managed it.

Thank you!

wgk