Creating an off-canvas menu for small screens

Note: this off-canvas menu approach works for all BindTuning themes that have toggle mobile top navigation.

Edit your masterpage/layout in use.

After <body>, add the following divs:

<body>

<div id="wrapper">
<div id="page-content-wrapper">

Close the divs before </body>
```
</div>
</div>

</body>
```

Locate MenuH and add 2 divs wrapper:

<div id="sidebar-wrapper"><div class="sidebar-nav">
	<div id="MenuH"> 
		... 
	</div>
</div></div>

Add a button to open/close the offcanvas menu:

<button class="navbar-toggle offcanvas-toggle" type="button">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
</button>

If you already have a toggle button for top mobile nav, you can replace it to the code above.

Add the following CSS snippet:

@media (max-width: 767px) {
	.navbar-toggle.offcanvas-toggle .icon-bar { background: #000; width: 25px; height: 3px; }
	
    #wrapper {padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
    #wrapper.toggled { padding-left: 250px;}
    #sidebar-wrapper { z-index: 1000; position: fixed; left: 250px; width: 0;  height: 100%; margin-left: -250px; background: #fff; 
                        -webkit-transition: all 0.5s ease;  -moz-transition: all 0.5s ease;  -o-transition: all 0.5s ease; transition: all 0.5s ease;
                        top: 0; overflow:hidden; box-shadow: inset 0px 0px 20px rgba(0,0,0,0.3);}
    #wrapper.toggled #sidebar-wrapper {width: 250px;overflow:hidden;}
    #page-content-wrapper {width: 100%; position: absolute;}
    #wrapper.toggled #page-content-wrapper {position: absolute;margin-right: -250px;}
    .sidebar-nav {position: absolute; top: 0; width: 250px; margin: 0; padding: 0;}
    }

@media(min-width:768px) {
    #wrapper.toggled { padding-left: 0; }
    #wrapper.toggled #sidebar-wrapper { width: 0; }
    #page-content-wrapper { position: relative; }
    #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0; }
    }

Finally, add the following script to the bottom of the page to make everything working!

<script>
$(".navbar-toggle.offcanvas-toggle").click(function (e) {
   e.preventDefault();
   $("#wrapper").toggleClass("toggled");
});
</script>

Comments

PRODUCTS

Solutions

Learn

about us