How to add navbar toggle button for blogger

Navbar toggle button is the simplest way to open a menu that is permanently inserted into a location in the theme including two closed and open effects when clicked on the button. Here is a tutorial on adding a button to the template and a preview demo.

Demo:

Detailed instructions:

Step 1: Add the button to the position you want to display in the template

Copy

<button class='navbar-toggle' arial-label='Menu' role='Menu' onclick='openMenu()' type='button'>
  <span class='toggle-icon'></span>
</button>

Step 2: Insert css in <b:skin ></b:skin>

Copy

.navbar-toggle {
    width: 28px;
    height: 28px;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    outline: 0;
}
.navbar-toggle .toggle-icon {
    position: relative;
    width: 18px;
    height: 2px;
    display: inline-block;
    background: #999;
}
.navbar-toggle .toggle-icon:before, .navbar-toggle .toggle-icon:after {
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: #999;
    content: " ";
}
.navbar-toggle .toggle-icon:before {
    bottom: 12px;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    transform: rotate(0);
    transition-duration: 400ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.navbar-toggle .toggle-icon:after {
    top: -6px;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    transform: rotate(0);
    transition-duration: 400ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.navbar-toggle .toggle-icon.is-clicked {
    background: rgba(153,153,153,0);
}
.navbar-toggle .toggle-icon.is-clicked:before {
    bottom: 5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    transition-duration: 400ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.navbar-toggle .toggle-icon.is-clicked:after {
    top: -5px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transition-duration: 400ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

Step 3: Insert javascript before the closing tag </head> or before </body> okay:

Copy

<script>//<![CDATA[
function openMenu() {
  var element = document.getElementsByClassName('toggle-icon')[0];
  element.classList.toggle('is-clicked');
}
//]]></script>