Saturday

bootstrap mobile menu stays open in my header.html

5:42 AM bootstrap-5, css, html No comments

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

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Saturday

bootstrap mobile menu stays open in my header.html

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels