MisutoWolf
MisutoWolf

Reputation: 1233

Bootstrap collapse mobile navbar not working

I'm working on a Meteor project, and my navigation bar is supposed to have the collapsing functionality that Bootstrap provides. The following is my navigation code:

<!-- Navigation, via bootstrap -->
<nav class="navbar navbar-default navbar-fixed-top">
    <section class="container-fluid">

        <section class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{ pathFor 'home' }}"><i class="fa fa-usd"></i>&nbsp;&nbsp;AccountedFor</a>
        </section>

        <!-- collapse? -->
        <section class="collapse navbar-collapse" id="collapse-1">
            <ul class="nav navbar-nav">
                {{#if currentUser}}
                    <p class="navbar-text">|</p>
                    <li><a href="{{pathFor 'categories'}}">Manage Categories</a></li>
                {{/if}}
                <p class="navbar-text">|</p>
                <li><a href="{{pathFor 'about'}}">About</a></li>
            </ul>
            <section class="navbar-right">
                <p class="navbar-text">
                    {{> loginButtons align="right"}}
                </p>
            </section>

        </section> <!-- end collapse -->
    </section>
</nav>

This is what the current bar looks like, after I clicked the button that should be expanding the menu.

Incorrect Navbar

This is what the bar looks like when it is of adequate width to not require collapse, with all entries visible:

Full Navbar

It has no problem showing the applicable toggle button when the size of the window is appropriate, but the collapsing functionality I'm expecting does not happen. Anyone care to offer some advice? Thanks ahead of time:

http://jsfiddle.net/bfo38kb1/ <-- This fiddle illustrates the problem I'm having.

Upvotes: 0

Views: 611

Answers (1)

Yogesh Khatri
Yogesh Khatri

Reputation: 1210

bootstrap.js file is missing in your fiddle.
Including it makes it working.

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

see this http://jsfiddle.net/bfo38kb1/1

Upvotes: 1

Related Questions