Bootstrap navbar is not toggling…

  • socrathes

    (@socrathes)


    10 years, 6 months ago

    Hello everyone,

    I have just added a navigation bar (with bootstrap) that is supposed to collapse into a menu-symbol when reducing the window-size. The layout is working but when I click on the symbol nothing happens and I have no clue as to why. It would be great if someone could help me out!

    Is the style/script not correctly enqueued? 

    <?php 

function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
	wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array("jquery"));
	wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

?>

    Or is it the html?

    <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
    <?php wp_head(); ?>
  </head>
<body <?php body_class(); ?>>
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Me</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
         <?php wp_list_pages(array('title_li' => '')); ?>
      </ul>
    </div>
  </div>
</nav>

    I have included the header & footer functions of wordpress in their respective files.

    Thank you!

The topic ‘Bootstrap navbar is not toggling…’ is closed to new replies.