CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
GibboK
GibboK

Reputation: 73918

How to enable Toggle button navbar-toggle in bootstrap

When the browser window is at mobile phone size, I need to display navbar-toggle and when user click on it I would like to show a list (similar to this http://getbootstrap.com/examples/navbar-static-top/).

Any idea how to fix my code?

http://jsfiddle.net/D2RLR/7492/

<div class="container">
    <!-- navbar -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">KanbanBoard</a>

                <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>

            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <button type="button" class="btn btn-default navbar-btn">Boards</button>
                <button type="button" class="btn btn-default navbar-btn navbar-right"><span class="glyphicon glyphicon-cog"></span>&nbsp;MY NAME</button>
            </div>
        </div>
    </nav>

    <!-- boards -->
    <div ng-view></div>
</div>

Upvotes: 2

Views: 2597

Answers (3)

Dr Bala Soundararaj
Dr Bala Soundararaj

Reputation: 165

Keeping your items in the navbar-collapse as an unordered list with the classes 'nav' 'navbar-nav' should solve the problem.

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><button type="button" class="btn btn-default navbar-btn">Boards</button></li>
        <li><button type="button" class="btn btn-default navbar-btn navbar-right"><span class="glyphicon glyphicon-cog"></span>&nbsp;MY NAME</button></li>
    </ul>                
</div>

http://jsfiddle.net/D2RLR/7500/

Upvotes: 1

Snykri
Snykri

Reputation: 600

You forget to add bootstrap JavaScript file. 

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Upvotes: 1

khan33
khan33

Reputation: 101

Muke sure that you have added the JQuery some time you should add that at the top of your page

if you want to use cdn 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Upvotes: 1

Related Questions