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");
});
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.htmldocument (and would therefore end up as non-permitted children elements within your mainindex.htmlfile).In short, save your
navbar.htmlfile with the following contents: