导航栏下的Bootstrap Off Canvas菜单

Question

Please forgive me if you feel that the question i am asking is little silly.

I am trying to create HTML page with Bootstrap NavBar and Off Canvas and found the page which does exactly the same i wanted. On top of the existing i need one extra feature.

http://getbootstrap.com/examples/offcanvas/

If you look at this link you will see navigation bar on top of the page and list on right hadn side. whne we reduce the size of the page navigation bar will turn into Menu icon and list will disappear. Also new button will be added to show hide list.(see below Big screen image)

What i need is to move the link/button which is visible on small screen should get added on the left side of the navbar. Simmiler kind of icon the one we have for menu on small screen.(see below small screen image)

Big screen

Small screen

Answer 1

You could put the toggle button into the navbar like this..

<div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
       </button>
       <button type="button" class="navbar-toggle visible-xs pull-left" data-toggle="offcanvas">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#">Project name</a>
</div>

Codeply demo

Answer 2

Try using the pull-left class on the button instead of the default pull-right class.

Example: http://www.bootply.com/274FaWMbMX

The flaw with this design is that after a user clicks the button to access the menu, the button is no longer visible due to the menu expanding.