bootstrap mobile menu stays open in my header.html

Adele
November 9, 2023
243 views
0 votes
2 Answers

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/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous">
        <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"></script>
<link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/umd/popper.min.js"
            integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
            crossorigin="anonymous"></script>
        <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/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?

Answers

- callmeGi
- November 9, 2023 at 5:19 pm
- 0 votes
0
Your problem may be when the menu is toggled, it has some span overlay on it, so when you click, you click on the overlay, not the button.

You can open the Devtools on Chrome by right-click and choose Inspect element to check. Or you can try find the error by checking the console.log() if it return any errors

Login or Signup to reply.

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/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous">
        <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"></script>
<link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous">
        <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"></script>
<link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/umd/popper.min.js"
            integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
            crossorigin="anonymous"></script>
        <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous">
        <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"></script>
<link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Please signup or login to give your own answer.

Click here to cancel reply.