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.

 

 

  1. Edit your masterpage/layout in use.
  2. After <body>, add the following divs:
    <body>
    
    <div id="wrapper">
    <div id="page-content-wrapper">
    
  3. Close the divs before </body>
    </div>
    </div>
    
    </body>
    
  4. Locate MenuH and add 2 divs wrapper:
    <div id="sidebar-wrapper"><div class="sidebar-nav">
    	<div id="MenuH"> 
    		... 
    	</div>
    </div></div>
    
  5. 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.
  6. 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; }
        }
    
  7. 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>
Have more questions? Submit a request

Comments

Got a question?

If you can't find the answer to your question, you can contact us.
We are here and happy to help.

Powered by Zendesk