Here is an example of my current working code:
This is what I want to achieve:
The content within the <section> (such as the three circles) is designed to be responsive and adjust itself according to the browser size. If you resize the Fiddle render window, you'll see how the circles stack accordingly.
Now, when I click on the hamburger menu, I expect the same responsive behavior. The sidebar that slides in uses an "offcanvas reveal" effect but it doesn't trigger the responsive layout. Instead, all the content gets pushed off the edge of the page. How can I fix this issue?
Below is a snippet of my code:
<div id="wrapper">
<header>
<div class="navmenu navmenu-default navmenu-fixed-right">
<ul class="nav navmenu-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="active"><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</header>
<div class="canvas">
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<!-- content goes here -->
</div>
</div>
</div>