Bootstrap 4 Animated Hamburger

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

How to change bootstrap 4’s hamburger and make it animated. Very easy tutorial.

In this tutorial we will be changing Bootstrap 4 hamburger default hamburger with a fancy new animated one.

This tutorial doesn’t require a lot of knowledge on HTML & CSS, simply copy and paste! You do need to know how to edit your active themes CSS sheet. If you do, skip the bit below.

Customising your Themes main CSS Sheet


To edit your Themes main CSS sheet simply log-in to your cPanel using an FTP Manager or through your browser.

Once logged-in go to the following directory:
wp-content/themes/active_theme/

In this folder you’ll find STYLE.CSS.

The Tutorial


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 please 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

Leave a Reply

Fast, Secure Payments. Download Themes & Plugins instantly!

Manage your orders and downloads