JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.shynemedia.com/dev/ikuw/20150123_site_revamp/assets/js/mmenu/jquery.mmenu.min.all.js"></script>
<link rel="stylesheet" href="http://www.shynemedia.com/dev/ikuw/20150123_site_revamp/assets/css/mmenu/jquery.mmenu.all.css">
<link rel="stylesheet" href="http://www.shynemedia.com/dev/ikuw/20150123_site_revamp/assets/css/normalize_v3.0.2.css">
<script src="http://www.shynemedia.com/dev/ikuw/20150123_site_revamp/assets/js/mmenu/jquery.mmenu.fixedelements.min.js"></script>
<!--TOP BANNER-->
<div id="navTopBanner">
    <!--NAV LEFT RIGHT HEADER-->
    <div id="navLeftRightHeader" class="FixedTop">
        <a id="hamburgerLeft" href="#navLeft"><span></span></a>
        <span id="navLeftRightHeaderText">SHOW ON SCROLL</span>
        <a id="arrowRight" href="#navRight"><span></span></a>
    </div>
    <!--/nav left right header-->
</div>
<!--/top banner-->
<!--NAV LEFT-->
<nav id="navLeft">
	<ul>
		<li><a href="#">left</a>
			<ul>
                <li><a href="#">left 1</a></li>
                <li><a href="#">left 2</a></li>
                <li><a href="#">left 3</a></li>
                <li><a href="#">left 4</a></li>
            </ul>
        </li>
	</ul>
</nav>
<!--/nav left-->
<!--NAV RIGHT-->
<nav id="navRight">
    <ul>
        <li><a href="#">right</a>
			<ul>
                <li><a href="#">right 1</a></li>
                <li><a href="#">right 2</a></li>
                <li><a href="#">right 3</a></li>
                <li><a href="#">right 4</a></li>
            </ul>
        </li>
    </ul>
</nav>
<!--/nav right-->
<!--PAGE CONTENT-->
<div id="pageContent">
    <div id="pageContentHeader">PAGE CONTENT FIXED HEADER
    </div>
    <div id="pageContentTextWrapper">
        <div id="pageContentText">TEXT TO SCROLL UNDER FIXED HEADERS<br>...

CSS

body {color:#4D4D4D; padding:0; margin:0; background:#CCCCCC;}

#pageContent {width:100%; margin:0px auto; text-align:center;}
#pageContentHeader {width:100%; background:#666; height:35px;color:#FFFFFF; line-height:35px; vertical-align:middle; position:fixed;}
#pageContentTextWrapper {padding:50px 0 0 0;}
#pageContentText {display:block;}

/* NAV LEFT RIGHT HEADER -----*/
#navTopBanner {display:none; position:fixed; top:0; left:0;}
.hide {display:none;}
#navLeftRightHeader {font-size:18px; font-weight:300; color:#FFFFFF; line-height:35px; vertical-align:middle; width:100%; height:35px; padding:0 0px; text-align:center; position:fixed; top:0; left:0; border-bottom:rgba(255,255,255,.2) 1px solid; display:none; background:#4D4D4D;}

#navLeftRightHeaderText {height:35px; line-height:35px; vertical-align:middle; text-align:center; display:none;}

/* NAV LEFT -----*/ 
#navLeft.mobile {display:none;}
#navLeft:not( .mm-menu ) {display:none;}

/* NAV RIGHT -----*/
#navRight.mobile {display:none;}
#navRight:not( .mm-menu ) {display:none;}

/* NAVICONS -----*/
/* ---- HAMBURGER NAVICON ---- */
#hamburgerLeft {box-sizing:border-box; display:block; width:40px; height:40px; position:fixed; top:0; left:0; z-index:99999; cursor:pointer;}
/* ---- HAMBURGER STATIC STATE ---- */
#hamburgerLeft:before, #hamburgerLeft span, #hamburgerLeft:after {background:#E6E6E6; content:''; display:block; width:20px; height:2px; position:absolute; left:15px;}
/* ---- HAMBURGER HOVER STATE ---- */
#hamburgerLeft:hover:before, #hamburgerLeft:hover:after, #hamburgerLeft:hover span {background:#FF8000; content:''; display:block; width:20px; height:2px; position:absolute;
}
/* ---- HAMBURGER VERTICAL POSITION ---- */
#hamburgerLeft:before {top:12px;}
#hamburgerLeft span {top:19px;}
#hamburgerLeft:after {top:26px;}
/* ---- HAMBURGER ANIMATION ---- */
#hamburgerLeft:before, #hamburgerLeft:after, #hamburgerLeft span {-webkit-transition:none .5s ease 1s; transition:none .5s ease 1s;...

JavaScript

//left nav
            $(document).ready(function() {
                function mmenuwL() {
                    var wiL = $(window).width();
                    var nbL = $(".clonedL").length;
                    if(wiL <= '767') {
                        if(nbL < 1) {
                            $("#navLeft").clone().addClass(".mobile").insertAfter("#navLeft");
                        }
                        $("#navLeft").mmenu({
                            //options
                            counters: true,
                            offCanvas: {
                                zposition: "next",
                                position: "left",
                            },
                            header: {
                                title: "LEFT",
                                add: true,
                                update: true,
                            },
                        });
                    }
                }
                mmenuwL();
                $(window).resize(function() { mmenuwL(); });		
            });

            // right nav
            $(document).ready(function() {
                function mmenuwR() {
                    var wiR = $(window).width();
                    var nbR = $(".clonedR").length;
                    if(wiR <= '767') {
                        if(nbR < 1) {
                            $("#navRight").clone().addClass(".mobile").insertAfter("#navRight");
                        }
                        $("#navRight").mmenu({
                            //options
                            counters: true,
                            offCanvas: {
                                zposition: "next",
                                position: "right",
                            },
                            header: {
                                title: "RIGHT",
                                add: true,
                                update: true,
                            },
           ...