JSFiddle - React, Tailwind, and code Playground

by Music for Mellons

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>

                <div id="nav-icon4"> 
                     <span></span>
                     <span></span>
                     <span></span>
                </div>
            </button> <a class="navbar-brand" href="{% url 'home' %}">Brandname</a>

        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="{% url 'home' %}">Home</a>

                </li>
                <li><a href="{% url 'about' %}">About</a>

                </li>
                <li><a href="{% url 'contact' %}">Contact</a>

                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">

CSS

/* START hamburger animation setup */
 #nav-icon4 {
    width: 36px;
    height: 14px;
    position: relative;
    margin: 1px auto;
    -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-icon4 span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: rgba(255, 200, 192, 1);
    border-radius: 9px;
    left: 0;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
#nav-icon4 {
}
/* BEFORE collapsed: hamburger */
 #nav-icon4 span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
    top: 8px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
    top: 16px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

/* AFTER extended: benchy */
 #nav-icon4.open span:nth-child(1) {
    top: 8px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}
#nav-icon4.open span:nth-child(2) {
    top: 8px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}
#nav-icon4.open span:nth-child(3) {
    top: 8px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

JavaScript

$(document).ready(function () {
    $('#navbar').on('show.bs.collapse', function () {
        $('#nav-icon4').addClass('open');
    });
    $('#navbar').on('hide.bs.collapse', function () {
        $('#nav-icon4').removeClass('open');
    });
});