Bootstrap 4 Animated Hamburger

Posted on February 10th, 2018 by M H in Tutorials | 2 Comments

How to change bootstrap 4’s hamburger and make it animated

In this tutorial we will be changing Bootstrap 4’s default hamburger with a fancy new animated one. It’s straight forward and doesn’t require a lot of work. All you need to know is how to edit your navigation page and your main CSS sheet.

Let’s get started…

1.) Replace bootstraps <span class=”navbar-toggler-icon”></span> with the settings below

<div id="nav-mhweb-hamburger">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</div>

2.) Now the CSS, I would just copy all of this and edit

.hamburger_nav{
overflow: hidden;
margin:0;
padding:0;
outline: none !important;
border:none;
}

#nav-mhweb-hamburger {
width: 30px;
height: 25px;
position: relative;
margin: 5px 0px 0px 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

#nav-mhweb-hamburger span {
display: block;
position: absolute;
height: 2px;
width: 50%;
background: #000;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

#nav-mhweb-hamburger.open span{
margin-left:3px;
margin-top:-4px;
}

#nav-mhweb-hamburger span:nth-child(even) {
left: 50%;
border-radius: 0 9px 9px 0;
}

#nav-mhweb-hamburger span:nth-child(odd) {
left:0px;
border-radius: 9px 0 0 9px;
}

#nav-mhweb-hamburger span:nth-child(1), #nav-mhweb-hamburger span:nth-child(2) {
top: 0px;
}

#nav-mhweb-hamburger span:nth-child(3), #nav-mhweb-hamburger span:nth-child(4) {
top: 10px;
}

#nav-mhweb-hamburger span:nth-child(5), #nav-mhweb-hamburger span:nth-child(6) {
top: 20px;
}

#nav-mhweb-hamburger.open span:nth-child(1), #nav-mhweb-hamburger.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

#nav-mhweb-hamburger.open span:nth-child(2),#nav-mhweb-hamburger.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#nav-mhweb-hamburger.open span:nth-child(1) {
left: 0px;
top: 9px;
}

#nav-mhweb-hamburger.open span:nth-child(2) {
left: calc(50% - 5px);
top: 9px;
}

#nav-mhweb-hamburger.open span:nth-child(3) {
left: -50%;
opacity: 0;
}

#nav-mhweb-hamburger.open span:nth-child(4) {
left: 100%;
opacity: 0;
}

#nav-mhweb-hamburger.open span:nth-child(5) {
left: 0px;
top: 19px;
}

#nav-mhweb-hamburger.open span:nth-child(6) {
left: calc(50% - 5px);
top: 19px;
}

3.) The JavaScript, add this to your footer above </body> tag. This tells the icon that we’ve pressed it and to change


<script type="text/javascript">
   $(document).ready(function(){
     $('#nav-mhweb-hamburger').click(function(){
     $(this).toggleClass('open');
   });
   });
</script>

You can change the colour of the lines to any colour you want. Simply add an ID to the <span is=”hamburger-pink”></span> tags then use background in your css.

Your finished! If you’ve enjoyed this tutorial leave a comment and share! It helps a lot. You can view more of our tutorials.

About author:

M H

I’m a freelance web designer from the UK, Scotland. Also available for freelance hire!

View all posts

2 Comments

  1. Philippe Hébert says:

    Hi ! I’m Philippe from Switzerland. Many thanks for your code to animate the burger with Bootstrap 4. I’m a rookie as web developer and I have a little problem. The animation works very well on Safari, Chrome and Explorer but doesn’t work on the latest version of Firefox (64.0). Did you have the same problem?

    Thank you a lot in advance for your answer

    Philippe Hébert

Leave a Reply

Your email address will not be published. All comments are reviewed.

Fast, Secure Payments. Download Themes & Plugins instantly!

Manage your orders and downloads