CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
pocockn
pocockn

Reputation: 2063

Attempting to use Bootstrap navbar toggle

I am attempting to use bootstraps navbar toggle, so when my site is viewed on an ipad or phone the navigation is then meant to be collapsed and a toggle button should appear. At the moment my navbar collapses however it doesn't then show the toggle button. Here is the code i am currently using.

<div class="row navbar">
    <div class="col-md-12">
        <nav  id="menu1"  class="navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <?php wp_nav_menu( array( 'theme_location' => 'main-menu',
                                    'depth' => 2,
                                      'container_class' => 'collapse navbar-collapse',
                                     'menu_class' => 'nav nav-pills nav-justified',
                                    'walker' => new wp_bootstrap_navwalker() )); ?>

        </nav>
    </div>
</div>

Upvotes: 1

Views: 192

Answers (2)

khilley
khilley

Reputation: 587

Here's a fiddle illustrating the standard syntax to use to accomplish this: Fiddle for basic Bootstrap 3 Navbar

And the corresponding HTML: 

  <!-- Navigation -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-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>
            </div>
        </div>

Upvotes: 1

iag
iag

Reputation: 166

  1. Have you put the link to bootstrap JavaScript file?

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  1. If yes, are you using the complete JavaScript file or one with only some components? The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

Hope this helps

Upvotes: 0

Related Questions