The Navbar in Bootstrap 3 remains expanded and does not collapse

It seems like there's a simple solution I'm overlooking. When I resize my screen, the navbar collapse toggle stops working. I've searched various forums but couldn't find a fix that works for me.

Could someone lend a hand in identifying what's missing from the code snippet below?

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/slate-bootstrap.min.css" />
  <link rel="stylesheet" href="css/larry.css" />
</head>
<body>
<div id="page">
  <header class="container">
    <div id="menu" class="navbar navbar-default">
        <div class="navbar-header">
            <button class="btn btn-success navbar-toggle" 
                    data-toggle="collapse" 
                    data-target=".navbar-collapse"><span class="glyphicon glyphicon-chevron-down"></span>
            </button>
            <div id="logo">
                <h4><a href='./index.html'><img src="images/LE-logo.png"></a></h4>
            </div>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav active"><a href="./index.html">Home</a></li>
                <li class="nav"><a href="./resume.html">Resume</a></li>
                <li class="nav"><a href="./contact.html">Contact</a></li>
                <li class="nav"><a href="./about.html">About</a></li>
            </ul>
        </div>
    </div>
  </header>

  <section id="body" class="container">
    <section id="main" class="col-md-9">
        <p> Ipsum lorem, blah , blah</p>

    </section>
  </section>


  <hr />
  <footer class="container">
    <p>Placeholder for footer</p>
  </footer>
</div>

<script scr="js/jquery-2.0.3.min.js"></script>
<script scr="js/bootstrap.min.js"></script>

</body>
</html>

Answer №1

Everything appears to be in order. If the navbar-collapse section isn't displaying, make sure to review any applied styles or hiding techniques that may have been implemented.

Answer №2

Following a thorough debug session using Firebug (undoubtedly one of the finest browser debugging tools available), it was discovered that bootstrap.js was not being loaded correctly. The reason for this failure to locate the file in my directory remains unknown, but switching to the CDN and adding "http://" at the beginning resolved the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble finding rows to manipulate in an HTML table generated using jQuery csvToTable?

As a beginner in programming, I find myself seeking assistance with a particular issue. I have successfully read a CSV file stored locally and transformed it into an HTML table using jQuery csvToTable http://code.google.com/p/jquerycsvtotable/. Additional ...

Conceal elements of a rectangular shape using CSS

https://i.stack.imgur.com/ebaeI.jpg I need help hiding the second rectangular shape on my website. I want the width to be 100% and responsive, but whenever I use position: absolute; with right:-10%, it's not working as expected. Even trying body { ma ...

Creating a custom order for sorting tables in jQuery

I have integrated this plugin into my Python project. Is it feasible to customize the sorting order of a column? In the quality column, the values can only be: 'low', 'mediocre', 'good,', and 'great'. I want them o ...

Discover the nearest class and smoothly expand it with the slideDown function in jQuery

Hey there, I'm working on implementing a "View More" button on my page. The button will reveal another unordered list that currently has the class of "hidden-list". When the user clicks on "View More", I want it to slideToggle the hidden-list element ...

Eliminate the header top margin in Bootstrap

HTML <div class="container-fluid"> <div class="row"> <div class="page-header header_site"> <h1><font>ABC Company</font></h1> </div> </div> </div> CSS Code: .header_site { b ...

Only display one div element when in print mode, hiding all others

My print style CSS code includes the following: * { display:none; } #printableArea { display:block; } Initially, I anticipated that this CSS would hide all elements except for the printableArea. Surprisingly, everything on the page became hidden when ...

I want to utilize an Ajax/JQuery filled dropdown to dynamically alter the user interface without the need for additional server-side requests

I am working on a feature where an AJAX post method populates a dropdown with object descriptions. But, I also need to update a textbox with the selected ID when changing the selection, without making another AJAX call. Here's the relevant code snipp ...

What is the best way to split an array into four columns and allocate 10 <li> items from the array to each column?

If I have a dynamic array with 40 elements that changes on every render, how can I loop through the array and return 4 groups of elements, each containing 10 items without any repetition? I want to style these objects in the array using a parent flex con ...

Replicate the form to a new one while concealing the elements and then submit it

Initially, I was working with just one form. Now, I find myself in a situation where I need to utilize a different form which contains the same inputs. This is necessary because depending on the action taken upon submission, different processes will be tri ...

Highlighting rows using jQuery upon selecting checkboxes

I attempted to emphasize a row in a table using jQuery when the checkbox is checked. This is the jQuery code I used for this purpose: $(":checkbox").change(function() { $(this).closest("tr").toggleClass("highlight", this.checked); }); However, it see ...

Adaptive Table Layout that Creates a Page-breaking Design

I have a page layout with three columns: a fixed-width left-hand navigation, a responsive content column, and a fixed-width right-hand navigation. The issue arises when the content in the middle column includes HTML tables that sometimes exceed the availab ...

Chrome is experiencing a delay in closing the Select Option dropdown menu

On my webpage, I have two select option buttons placed on different tabs. Whenever one button is changed, I want to update the value of the other button and assign it to a specific element like a span in the example code provided. While everything works sm ...

I'm still searching for a proper solution on how to access JavaScript/jQuery functions within Colorbox

For my website, I am utilizing PHP, jQuery/JavaScript, Colorbox (a jQuery lightbox plugin), Smarty, and other tools. Currently, I am working on displaying data in a popup using the Colorbox plugin. However, I am facing an issue with calling a JavaScript fu ...

Dynamic Data Visualization using ChartJS with MySQL and PHP

I'm trying to create a line chart using chartJs that will display MySQL data. Specifically, I would like to use PHP to push the MySQL data to the chartJs. Here is an example of the MySQL table: id | page_views | visitors | month | ---------------- ...

Using Angular, you can incorporate a dynamic href inside interpolation by using

Looking for a way to include a redirecting link within the response of string interpolation. I am incorporating the API response value into the interpolation binding. For instance, if my response is, "This site is not working. please contact google f ...

Using JavaScript, aim for a specific element by its anchor headline

I'm looking to make some changes to my navigation menu, specifically hiding the home menu item unless the mobile navigation menu is toggled. Is there a way for me to target the "home" anchor title and apply the active class to it when toggled, similar ...

Pass the ID to a PHP script to retrieve the image source tag from the database based on the file

I am facing a challenge that I thought would be simple, but despite my efforts to research and experiment, I can't seem to get it right. I have a database that stores image file names, and I need to retrieve the file name based on the ID specified in ...

Activate the clicked tab in the Bootstrap navbar when selected

I have gone through similar posts, but I am unable to get mine to work. My goal is to activate the clicked tab. Here is what my bootstrap navbar looks like in HTML: <div class="navbar navbar-default" role="navigation"> <div class="container" ...

What is the mechanism through which a flexbox enlarges to accommodate its overflowing child elements?

I am working with a flexbox layout. Here is the HTML code structure: <div class="grid"> <div class="row"> <div class="column">Content</div> <div class="column">Content2</div> <div class="column">Con ...

The outer DIV will envelop and grow taller in conjunction with the inner DIV

Could use a little help here. Thank you :) I'm having trouble figuring out how to get the outer div to wrap around the inner div and expand upwards with the content inside the inner editable div. The inner div should expand from bottom to top, and t ...