Bootstrap 5.3.0 - Navigation bar expanding but not collapsing on index.html

Question

I'm trying to make a responsive navigation bar, when I click on the hamburger button the navigation bar expands but clicking on it again doesn't make the navigation bar to collapse. I have searched for the same and tried some solutions but it didn't got fixed.

I'm using bootstrap 5.3.0. When i point to navbar.html, it works fine, but on the index.html it doesn't. I inspected in browser and found that collapse changes to collapse show upon first click and expands the navbar, on second click it shows collapsing and again changes to collapse show.

Here's my navbar.html:

<!DOCTYPE html>
<html lang="en" dir="ltr" data-bs-theme="dark">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
  <title>Demosite</title>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
    <div class="container-fluid">
      <a class="navbar-brand ps-1" href="#">Brand Name</a>
      <button id=collapseButton class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="true" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link" href="#">Link 1</a>
          <a class="nav-link" href="#">Link 2</a>
          <a class="nav-link" href="#">Link 3</a>
          <a class="nav-link" href="#">Link 4</a>
          <a class="nav-link" href="#">Link 5</a>
          <a class="nav-link" href="#">Link 6</a>
        </div>
      </div>
    </div>
  </nav>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

Here is my index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
  <title>Demosite</title>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <script src="navbar.js"></script>
</head>
  <body>
    <div id="navbar"></div>
    <div class="container mt-5">
      <h1>Demo Home Page</h1>
      <p>Hello! Welcome to homepage.</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

and my javascript:

$(function(){
  $("#navbar").load("navbar.html");
});

If you are injecting the contents of navbar.html into that `#navbar` element then your navbar.html should not contain the `DOCTYPE`, `html`, `head` and `body` elements. Why don't you simply write the navbar HTML in there and try to load it instead? — MrUpsidown, Jul 06 '23 at 09:03
@MrUpsidown Thanks, it worked. Can you kindly post this as answer, so i could accept it as a solution. — franklysiva, Jul 06 '23 at 09:51

score 0 · Accepted Answer · answered Jul 06 '23 at 10:09

The <html> HTML element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html

The <body> HTML element represents the content of an HTML document. There can be only one <body> element in a document.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body

Therefore, if you are loading HTML into an existing HTML document, that loaded HTML must not contain these elements as they already exist in your index.html document (and would therefore end up as non-permitted children elements within your main index.html file).

In short, save your navbar.html file with the following contents:

<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand ps-1" href="#">Brand Name</a>
    <button id=collapseButton class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="true" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link" href="#">Link 1</a>
        <a class="nav-link" href="#">Link 2</a>
        <a class="nav-link" href="#">Link 3</a>
        <a class="nav-link" href="#">Link 4</a>
        <a class="nav-link" href="#">Link 5</a>
        <a class="nav-link" href="#">Link 6</a>
      </div>
    </div>
  </div>
</nav>

Bootstrap 5.3.0 - Navigation bar expanding but not collapsing on index.html

1 Answers1