1

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

Improve this question
1
  • given answer will fix your issue, if still exists, share url where it has issue Commented Dec 4, 2013 at 6:55

3 Answers 3

Reset to default
7

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' );
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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?
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.
see the answer of @zessx or consider using github.com/bassjobsen/jamedo-bootstrap-start-theme
so as per his answer i should delete the enqueue code from functions.php. right sir?
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.
|
3

you should :

  1. Load jQuery and Bootstrap.js once, not twice each
  2. 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.

Improve this answer

1 Comment

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

I removed the integrity attributes and now it works just fine

Improve this answer

2 Comments

Hi Shreya, Would be nice if you could provide with an example of code. The question is for a wordpress site and has provided wordpress hooks. Thanks!
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.