I am in the process of creating a website that will feature a large menu. However, I am not a fan of the collapsed menu that comes with BS3. Instead, I would like to implement a drawer or off-canvas menu similar to the one showcased in BS3's offcanvas JS example (or any other plugin that offers similar functionality - with dropdown support). The challenge is that the example only demonstrates this on a sidebar menu/navigation. How can I adapt it to work with my current navigation structure?
Refer to the example here: http://getbootstrap.com/examples/offcanvas/
The desired functionality should be applied to the top menu, rather than a sidebar.
HTML
<nav id="navbar-main" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" id="menu-trigger" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div id="main-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav>