k-responsive-menu
true
k-menu-resize
700 OR 'xs', 'sm', 'md', 'lg', 'xl'
k-menu-icon
<i class='fa fa-bars'></i>
k-menu-speed
'slow' OR 'fast', 500
k-menu-width
'250px' OR '100%', '40rem'
k-menu-push
'left' OR 'right'
k-menu-position
'fixed' OR 'absolute'

HTML

<header class="bg-light">
  <div class="k-menu-bar container">
    <div id="logo" class="mr-auto"></div>
    <button k-toggle-for="#demoResAllInOneMenu" class="k-button-toggle navbar-toggler">MENU</button>
  </div>
  <div id="demoResAllInOneMenu" k-responsive-menu="true" k-menu-resize="780" k-menu-icon="<i class='fa fa-bars'></i>" k-menu-speed="200" k-menu-width="250px" k-menu-push="left" k-menu-position="fixed" class="container k-responsive-menu">
    <div k-menu-map-to="#logo" class="k-logo navbar-brand">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>
  </div>
</header>

JS

$(document).ready(function() {
  $('#demoResAllInOneMenu').kResponsiveMenu();
});