Implementing Navigation drawer bootstrap

Question

I am trying to implement a navigation drawer theme for my website using Boostrap. I am able to convert my navbar in desktop screen size to a navigation drawer button for smaller screens. However what I am trying to achieve is get the 3 bar icons of the drawer on the left hand side and "MyName" should not be visible on smaller screen sizes. Could some one help me out?

My HTML code is:

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container"> <a href="#" class="navbar-brand">MyName</a>

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">  <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">ABOUT ME<span class="sr-only">(current)</span></a>
                    </li>
                    <li><a href="#">RESUME</a>
                    </li>
                    <li><a href="#">PROJECTS</a>
                    </li>
                    <li><a href="#">BLOG</a>
                    </li>
                    <li><a href="#">CONTACT</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

I have created a JSFiddle for this: https://jsfiddle.net/DTcHh/9394/

score 4 · Accepted Answer · answered Jul 01 '15 at 06:04

Add the following classes: hidden-xs (class="navbar-brand hidden-xs") and pull-left (class='navbar-toggle pull-left")

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> <a href="#" class="navbar-brand hidden-xs">MyName</a>

    <button class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navHeaderCollapse">    <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">ABOUT ME<span class="sr-only">(current)</span></a>
            </li>
            <li><a href="#">RESUME</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">BLOG</a>
            </li>
            <li><a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
</div>

Thanks! It works. However is it possible, for the contents of the navigation drawer come on the left rather than the top. Like the Gmail app on the Iphone. When the navigation drawer button is pressed, all the options come on the left and the main page is shifted towards the left — user1692342, Jul 01 '15 at 22:09
It's definitely possible but you'll have to restructure your navigation elements to achieve this: take a look at this SO Post - https://stackoverflow.com/questions/19397140/collapsing-sidebar-with-bootstrap-3 — vanburen, Jul 01 '15 at 22:15

Implementing Navigation drawer bootstrap

1 Answers1