bootstrap navbar toggle button is not working

twitter-bootstrap wordpress-theming twitter-bootstrap-3 collapse togglebutton

25,275

Solution 1

Please read http://getbootstrap.com/components/#navbar first. Your navbar requires javascript:

If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

Make sure you include bootstrap.js in your document. You forgot to upload this maybe?

update based on new information in your question:

enqueue all your javascripts and css in functions.php and remove them from your header.php and footer.php

javascript:

function skematik_jquery_js(){
    wp_enqueue_script('jquery');
}

function wpt_register_js() {
    wp_register_script(
        'jquery.bootstrap.min', 
        get_template_directory_uri() . '/js/bootstrap.min.js', 
        'jquery'
    );
    wp_enqueue_script('jquery.bootstrap.min');
}

/* Load Scripts */
add_action( 'wp_enqueue_scripts', 'skematik_jquery_js' );
add_action( 'wp_enqueue_scripts', 'wpt_register_js' );

css:

function wpt_register_css() {
    wp_register_style(
        'bootstrap.min', 
        get_template_directory_uri() . '/css/bootstrap.min.css'
    );
    wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

Solution 2

you should :

Load jQuery and Bootstrap.js once, not twice each
Load jQuery before Bootstrap.js

Currently, you've got :

<head>
    <script type="text/javascript" src="http://www.drjulians.com/wp-content/themes/new_responsive/js/bootstrap.min.js?ver=3.6"></script>
</head>
<body>
    ...
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://www.drjulians.com/wp-includes/js/jquery/jquery.js?ver=1.10.2"></script>
</body>

The console output confirm what we can guess :

Uncaught Error: Bootstrap requires jQuery

When you load Bootstrap.js, jQuery is still not loaded.

25,275

Author by

Zammuuz

software engineer

Updated on August 22, 2020

Comments

Zammuuz over 3 years

I'm working on a responsive wordpress theme with Bootstrap v3.0.2.

In mobile/tablet browsers instead of the whole menu i need to show the Bootstrap toggle button. My button is showing, but when I click on it nothing is happening. This is code I wrote in my header.php :

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

And the one I wrote in function.php :

function wpt_register_js() {
    wp_register_script(
        'jquery.bootstrap.min', 
        get_template_directory_uri() . '/js/bootstrap.min.js', 
        'jquery'
    );
    wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );

function wpt_register_css() {
    wp_register_style(
        'bootstrap.min', 
        get_template_directory_uri() . '/css/bootstrap.min.css'
    );
    wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

the footer.php code contains:

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
  <?php wp_footer();?>
   </body>

the header.php contains:

<head>
<meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php wp_title('|', true, 'right'); ?></title>
   <link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css"   rel="stylesheet" type="text/css">

   <link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
   <?php wp_head(); ?> 

    </head>

this question is resolved by using the answer of Bass Jobsen.thanks friend

Ravimallya over 10 years

given answer will fix your issue, if still exists, share url where it has issue

Zammuuz over 10 years

thank u for your response sir. i have used the above code for adding the javascript file bootstrap.min.js file. is that the file you mentioned? or did i missed any other js file?
Bass Jobsen over 10 years

yes, that's the file. I enqueue the scripts on wp_enqueue_scripts instead of jquery mostly. I don't expect this cause your problem. You will also have to enqueue jquery. If possible show an url with the representation of your problem.
Bass Jobsen over 10 years

see the answer of @zessx or consider using github.com/bassjobsen/jamedo-bootstrap-start-theme
Zammuuz over 10 years

so as per his answer i should delete the enqueue code from functions.php. right sir?
Bass Jobsen over 10 years

nope try to remove the first one, it's in your theme header i think so. Also read bassjobsen.weblogs.fm/…. enqueue jquery and boostrap and set the dependeny of jquery for bootstrap.
Zammuuz over 10 years

oh... the first one means the function wpt_register_js()? ? (i'm asking these many doubts because i'm so confused.sorry sir :( )
Susobhan Das almost 4 years

I had similar issues - load jquery before bootsrap.js the navbar toggle works now