The bootstrap mobile menu is stubbornly staying open in my header.html file

I've organized my code with a separate HTML file for the header section. The index file, where I've included all the necessary links to Bootstrap, appears as follows:

<head>
...
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons/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/popper.js@2.11.6/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.1.3/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
crossorigin="anonymous"></script>


</body>

Additionally, here is the content of my header.html file:

<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">
            <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>

Currently, when I click the burger icon to open the menu, it stays open even after another click. Could this issue be due to the separate file for the navbar?

htmlcssbootstrap-5

Answer №1

Having the navbar in a separate file is not an issue.

The issue lies in index.html where Bootstrap is being loaded twice, causing a conflict.

To fix this, only load Bootstrap once in the first script tag as it already includes Popper, which is being loaded in the second script tag.

Update your index.html as follows:

<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:

  • Bootstrap loaded twice: not functioning correctly

<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 = `...your navbar code here...`;
                    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>

  • Bootstrap loaded once: working correctly

<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 = `...your navbar code here...`;
                    document.addEventListener("DOMContentLoaded", function () {
                        setTimeout(()=>{
                                document
                                    .querySelector('header')
                                    .innerHTML = data;
                            }, 1000);
                    })
                </script>
            </header>

........

</body>

Answer №2

It is possible that the issue arises when the menu is activated, causing a span overlay to obscure the button, making it challenging to click accurately.

To troubleshoot this problem, consider opening Chrome's Devtools by right-clicking and selecting Inspect element. Additionally, you can investigate any errors by monitoring the output of console.log().

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Concealing and Revealing a Div Element in HTML

Every time the page is refreshed, I am encountering a strange issue where I need to double click a button in order to hide a block. Below is the code snippet for reference: <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

javascripthtmlcss

The width of the Bootstrap row decreases with each subsequent row

I'm having trouble understanding this issue, as it seems like every time I try to align my rows in bootstrap, they keep getting smaller. Can anyone point out what mistake I might be making? ...

javascriptcsstwitter-bootstrap

Having trouble loading @font-face fonts

I am experiencing an issue where my downloaded fonts are not showing up in Chrome. I am utilizing scss which gets compiled to css using gulp. If I directly visit http://project-name.localhost/data/fnt/Shermlock.ttf I can successfully download the font. ...

cssapachefontssassdirectory-structure

Implement a JavaScript and jQuery code that alternates between fading in and fading out every two items in a

Can someone help me figure out how to create a loop that fades in and out every 2 items from an unordered list using jQuery? I've been trying to do this, but my loop only processes one item at a time. <div> <ul> <li>item1</li ...

javascripthtmljquerycss

Customizing the appearance of Twitter Bootstrap based on the AngularJS input class $invalid

I'm struggling with getting error messages to display properly in my Bootstrap form when using AngularJS. I followed the instructions on this link: but I still can't figure out what I'm doing wrong. Any advice? Thanks <div class=" ...

javascriptcssangularjstwitter-bootstrap

Angular does not employ any Bootstrap styles when rendering

I have successfully installed both Ngb and Bootstrap 4 using the commands provided below, with the root module importing the package as well. npm install @ng-bootstrap/ng-bootstrap --save npm install bootstrap@next --save Within my code, I am attem ...

csstwitter-bootstrapangularsassbootstrap-4

What is the best way to position my NavBar items to the right using the Bootstrap v5.2 framework?

I am working on a project for my course and need some help. My goal is to have the brand stay aligned to the left, while other items align to the right. I have been able to achieve this without a toggler using justify-content-end, but with a toggler, I a ...

htmlcsstwitter-bootstrap

Accessing a .mov File Online for Everyone

Looking for a way to host my lengthy .mov file on my own server but display it in a YouTube-style player that is compatible with all browsers. Any suggestions on how to achieve this easily? ...

javascriptflashhtmlvideo-streamingmovie

Switching to a dropdown navigation option

Sorry for the repetition, but I haven't been able to find a solution to my problem yet, so here I am asking again. I am still getting the hang of html5 and css3, and while I've managed so far, I'm stuck now. I want to turn one of the option ...

htmlcssdrop-down-menu

The PhoneGap Android whitelist feature seems to be malfunctioning and preventing navigation to the next page

Currently, I am utilizing the jQuery function load() with the code snippet $('#result').load('http://.... #div'); to retrieve the content of an external website. Moreover, I have made modifications to the domain whitelist specifically f ...

htmlcordovawhitelist

How come using float:right causes the div to float towards the left instead?

I am new to CSS and currently facing a problem with positioning a div (#inner) in the bottom-right corner of another div (#container). Initially, I used float: right;, but upon inspecting the Html, I noticed that the inner div is appearing in the bottom-le ...

css

Exploring "Additional resources" using Selenium and Python

I am looking to extract text from the "Further reading" section of a Wikipedia article. My current code can open Google, input a request (such as 'Bill Gates'), and then find the URL of the corresponding Wikipedia page. Now I need help parsing th ...

htmlpython-3.xseleniumparsingselenium-webdriver

Application of Customized Bootstrap CSS Not Successful

I have noticed that my custom CSS file does not override the bootstrap.min.css unless I include the !important tag in the class. Specifically, when I try to change the color of my background header. .bg-grey{ background-color:#333 !important; } The ...

htmlcssbootstrap-4

Execute Cheerio selector once the page has finished loading

Hey there! I'm trying to extract the URL value of an iframe on this website: I've checked the view page source but couldn't find the iframe. Looks like it's loaded after the page is fully loaded through JavaScript. Could it be that ...

javascripthtmlnode.jsweb-scrapingcheerio

Retrieve the innerHTML contents from all span elements

I'm having trouble getting the content of all span tags that are child elements of div#parent. So far, I've only been able to retrieve the content of the first one. Can someone please assist me with this? $( document ).ready(function() { ...

javascriptjqueryhtml

What could be causing my page to suddenly disappear?

After saving my changes in the IDE and refreshing the browser to test the prompt() function in my index.js file, the entire page goes blank, showing only a white screen. I double-checked the syntax of my function and it seems correct. Everything else on th ...

javascripthtmlcssreactjs

Looking for assistance with a PHP program that involves if-else statements

<HTML> <body> <?php echo "<H4>Do you identify as male?</h4>" ?> <form action ="ifstat.php" method ="post"> Please enter your response: <input type="text" name="val1"> <input type ="submit" > <inp ...

phphtmlxampp

When using HTML select tags, make sure to submit the actual text of the selected option instead of just the value attribute

There seems to be an issue with a form that I am submitting via POST where the option text is being sent instead of the option value. Here is my select declaration: <select name = "newfreq"> <option val='1'>every week</option ...

phpjqueryhtmlforms

Is there a way to undo the CSS rotate animation that has been applied?

Struggling with reversing a CSS animation based on a class being added to a DOM node? Take a look at the code I've been using: EXAMPLE // Closed state @-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } } @-webkit-keyfra ...

csscss-animations

Switching out text when hovering with Jquery or JavaScript

Is there a way to use jQuery or JS to make the text and icon disappear when hovering over a div, and replace it with "Read More"? I've looked at some guides but they only remove one line of text instead of clearing the entire div and displaying "Read ...

javascriptjqueryhtmlcss