Bootstrap 4 Hamburger Menu Animation

This is what we’ll be making…


First thing to note is that the way the “Hamburger” menu works in Bootstrap v4 is different to the previous version of Bootstrap. In Bootstrap v3 the hamburger was made up of three individual span tags. In the latest version, this has been replaced with a single span tag with an SVG graphic drawn into the background. This new approach isn’t going to work for this purpose, so the first thing we’ll do is adopt the previous approach.

In Bootstrap v4, the button in the nav that toggles the dropdown menu looks something like this:

We need to replace it with the following:

This replaces the single span tag with three as explained above. We also put the .icon-bar class on each of them, along with a unique class (top, middle and bottom-bar). We’ll need a way to uniquely identify each of them when it comes to animation them in just a second.


Next to the CSS we need to make this look like the traditional Hamburger Menu is:

If you look at the page in a browser at this point, everything should look familiar. You should have the dropdown menu behaving as it always should.

 The Animation

The animation is all taken care of in the CSS with just a few extra classes: