$('#nav-expander').on('click',function(e){ e.preventDefault(); $('body').toggleClass('nav-expanded'); }); $('#nav-close').on('click',function(e){ e.preventDefault(); $('body').removeClass('nav-expanded'); }); // Initialize navgoco with default options $(".main-menu").navgoco({ caret: '', accordion: false, openClass: 'open', save: true, cookie: { name: 'navgoco', expires: false, path: '/' }, slide: { duration: 300, easing: 'swing' } });
<nav> <ul class="list-unstyled main-menu"> <!--Include your navigation here--> <li class="text-right"><a href="#" id="nav-close">X</a></li> <li><a href="#">Menu One <span class="icon"></span></a></li> <li><a href="#">Menu Two <span class="icon"></span></a></li> <li><a href="#">Menu Three <span class="icon"></span></a></li> <li><a href="#">Dropdown</a> <ul class="list-unstyled"> <li class="sub-nav"><a href="#">Sub Menu One <span class="icon"></span></a></li> <li class="sub-nav"><a href="#">Sub Menu Two <span class="icon"></span></a></li> <li class="sub-nav"><a href="#">Sub Menu Three <span class="icon"></span></a></li> <li class="sub-nav"><a href="#">Sub Menu Four <span class="icon"></span></a></li> <li class="sub-nav"><a href="#">Sub Menu Five <span class="icon"></span></a></li> </ul> </li> <li><a href="#">Menu Four <span class="icon"></span></a></li> <li><a href="#">Menu Five <span class="icon"></span></a></li> </ul> </nav> <div class="navbar navbar-inverse"> <!--Include your brand here--> <a class="navbar-brand" href="#">Off Canvas Menu</a> <div class="navbar-header pull-right"> <a id="nav-expander" class="nav-expander fixed"> MENU <i class="fa fa-bars fa-lg white"></i> </a> </div> </div>