Search code examples
twitter-bootstraptwitter-bootstrap-3wordpress-themingtogglebutton

bootstrap navbar toggle button is not working

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

Solution

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

    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' );