HTML
<header class="bg-light">
<div class="k-menu-bar container">
<div id="logo" class="mr-auto"></div>
<div id="language"></div>
<button k-toggle-for="#demoResAllInOneMenu" class="k-button-toggle navbar-toggler">MENU</button>
</div>
<div id="demoResAllInOneMenu" class="container k-responsive-menu">
<div class="k-menu-bar">
<div class="k-logo navbar-brand mr-auto">LOGO Menu</div>
<button k-toggle-for="#demoResAllInOneMenu" class="k-button-toggle navbar-toggler">MENU</button>
</div>
<div k-menu-map-to="#logo" class="k-logo navbar-brand mr-auto">LOGO</div>
<ul class="nav">
<li class="nav-item"><a href="#" class="nav-link">About us</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item dropdown"><a id="navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">Dropdown</a>
<div aria-labelledby="navbarDropdown" class="dropdown-menu"><a href="#" class="dropdown-item">Action</a><a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div><a href="#" class="dropdown-item">Something else here</a>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">Shop</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact us</a></li>
</ul>
<ul k-menu-map-to="#language" class="nav language">
<li class="nav-item"><a href="#" class="nav-link">EN</a></li>
<li class="nav-item"><a href="#" class="nav-link">VN</a></li>
</ul>
</div>
</header>
JS
$(document).ready(function() {
$('#demoResAllInOneMenu').kResponsiveMenu({
animationSpeed: 'slow', // slow, fast, 200
resizeWidth: 800, // 'xs', 'sm', 'md', 'lg', 'xl', 480,
menuPush: 'right', // right, left
menuPushPosition: 'fixed', // absolute
menuPushWidth: '300px', // px, %, rem
});
});