CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
dawn
dawn

Reputation: 1341

Bootstrap navbar collapse doesn't work

I can't find the reason why, when trying to use the navbar button from Bootstrap, it doesn't work.

I think it has something to do with my page loading the jQuery library or something, though I don't understand.

Here is my code. I'll show just the head and navbar parts since I believe there's where the problem lives. Everything else is simple HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1">
    <!--Boostrap jQuery-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjsmfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <!--Boostrap-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <!--Favicon-->
    <link rel="icon" type="image/png" href="media/favicon-32x32.png" sizes="32x32" />
    <!--Mi CSS-->
    <link rel="stylesheet" type="text/css" href="index.css">

    <!-- p5.js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script>
    <script src="js/sketch.js" type="text/javascript"></script>

    <title>Festival Sonorum</title>
</head>

<body>
    <!-- navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
            <span class="sr-only">Navegación</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
                <a class="navbar-brand" href="index.html">Festival Sonorum</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="programa.html">Programa</a></li>
                    <li><a href="#acerca">Acerca</a></li>
                    <li><a href="#contacto">Contacto</a></li>
                    <li><a href="#galeria">Galería</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Artistas <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li class="dropdown-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </nav>
    <!--fin del navbar-->

Am I missing something? Like loading a library?

Upvotes: 4

Views: 14952

Answers (2)

Djordje Milošević
Djordje Milošević

Reputation: 67

You should check your bootstrap.css files in the head section, jquery.js before body closing tags, and you should give id to toggled nav same as button data-target.

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">  
  <span class="navbar-toggler-icon"></span>
</button>
     <div class="collapse navbar-collapse" id="navbarResponsive">

Upvotes: 0

Dan Mindru
Dan Mindru

Reputation: 6104

Bootstrap does not include jQuery, so you need to add it yourself to make it work. Add it just before your bootstrap.js script.

As per Bootstrap's docs:

jQuery required

Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.

On top of that, the integrity check fails on your bootstrap.min.js script. To make it work you need to fix that and add at least version 1.9.0 of jQuery:

...
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

<!--Boostrap jQuery-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
...

Upvotes: 7

Related Questions