Issue
I have a separate html file for the header. so my index, where I also have put all the necessary link to work with bootstrap, looks like this:
<head>
...
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css "/>
</head>
<body>
<header>
<script>
document.addEventListener("DOMContentLoaded", function () {
fetch('header.html')
.then(response => response.text())
.then(data => {
document
.querySelector('header')
.innerHTML = data;
})
})
</script>
</header>
.....
script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
crossorigin="anonymous"></script>
</body>
and this is my header.html
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="https://">Lorem Ipsum</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- <i class="bi bi-list"></i> -->
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="./#about-us">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#services">services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#team">team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#contacts">contact</a>
</li>
</ul>
</div>
</div>
</nav>
So I can open the menu by clicking the burger icon, but if I click it again it stays open. Does the fact that the navbar is in a separate file cause the issue?
Solution
No, navbar being in a separate file is not a problem.
The problem is that in index.html, you're loading Bootstrap twice, so apparently there is some conflict.
Just load Bootstrap once, and the one in the first script tag, because that one already includes Popper, which you're loading in lower, second script tags.
So, change your index.html like this:
<head>
...
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css "/>
</head>
<body>
<header>
<script>
document.addEventListener("DOMContentLoaded", function () {
fetch('header.html')
.then(response => response.text())
.then(data => {
document
.querySelector('header')
.innerHTML = data;
})
})
</script>
</header>
.....
<-- removed scripts from here -->
</body>
Simulations:
- BS loaded twice: not working
<head>
...
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css "/>
</head>
<body>
<header>
<script>
const data = ` <nav class="navbar navbar-expand-lg"> <div class="container-fluid"> <a class="navbar-brand" href="https://">Lorem Ipsum</a> <button class="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNavDropdown"aria-controls="navbarNavDropdown"aria-expanded="false"aria-label="Toggle navigation"> <!-- <i class="bi bi-list"></i> --> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="./#about-us">about</a> </li> <li class="nav-item"> <a class="nav-link" href="./#services">services</a> </li> <li class="nav-item"> <a class="nav-link" href="./#team">team</a> </li> <li class="nav-item"> <a class="nav-link" href="./#contacts">contact</a> </li> </ul> </div> </div> </nav> `;
document.addEventListener("DOMContentLoaded", function () {
setTimeout(()=>{
document
.querySelector('header')
.innerHTML = data;
}, 1000);
})
</script>
</header>
.....
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
crossorigin="anonymous"></script>
</body>
- BS loaded once: working
<head>
...
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css "/>
</head>
<body>
<header>
<script>
const data = ` <nav class="navbar navbar-expand-lg"> <div class="container-fluid"> <a class="navbar-brand" href="https://">Lorem Ipsum</a> <button class="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNavDropdown"aria-controls="navbarNavDropdown"aria-expanded="false"aria-label="Toggle navigation"> <!-- <i class="bi bi-list"></i> --> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="./#about-us">about</a> </li> <li class="nav-item"> <a class="nav-link" href="./#services">services</a> </li> <li class="nav-item"> <a class="nav-link" href="./#team">team</a> </li> <li class="nav-item"> <a class="nav-link" href="./#contacts">contact</a> </li> </ul> </div> </div> </nav> `;
document.addEventListener("DOMContentLoaded", function () {
setTimeout(()=>{
document
.querySelector('header')
.innerHTML = data;
}, 1000);
})
</script>
</header>
.....
</body>
Answered By - traynor
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.