What could be causing my menu to unexpectedly close as soon as I try to access it?

Every time I try to access the menu on the mobile version of my website, it automatically closes even though it should stay open. I am using Bootstrap 4.4.1.

CSS and HTML code:

.navbar{
    background: #707071;
}

.navbar .navbar-collapse {
    text-align: center;
}

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}
<!doctype html>
<html lang="en>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./css/style.css">

    <title>Home</title>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark static-top">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto navbar-center">
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">WERK</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">OVER</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60100f101005124e0a1320514e51564e50">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

I'm seeking assistance to fix this issue. Thank you in advance!

Answer №1

Your .navbar-nav.navbar-center class appears to be causing the issue, particularly due to the position: absolute style. Removing the custom definition of this class should resolve the problem.

.navbar{
    background: #707071;
}

.navbar .navbar-collapse {
    text-align: center;
}
<!doctype html>
<html lang="en>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./css/style.css">

    <title>Home</title>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark static-top>
    <div class="container>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation>
            <span class="navbar-toggler-icon></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive>
            <ul class="navbar-nav ml-auto navbar-center>
                <li class="nav-item>
                    <a class="nav-link text-white" href="#">WERK</a>
                </li>
                <li class="nav-item>
                    <a class="nav-link text-white" href="#">OVER</a>
                </li>
                <li class="nav-item>
                    <a class="nav-link text-white" href="#">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89f9e6f9f9ecfba7e3fac9b8a7b8bfa7b9">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous></script>
</body>
</html>

Answer №2

Ensure your JavaScript files are up to date and linked with a CDN snippet. Remove "position: absolute" from navbar-nav and add the following code in your CSS:

.navbar-center {
    text-align: center;
}

This will display your navigation menu in the center.

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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

What causes Chrome Extension Images to appear broken when they are inserted into the DOM?

Currently working on a Chrome extension, I am attempting to insert a div with a background image into the DOM using a content script. The CSS is loading correctly, and upon inspecting the Developer Tools, the image URL appears to be correct. $('.clos ...

Jquery vertical menu with a dynamic sliding animation from the right side to the left side

Hello everyone, I am looking to have my vertical menu slide from right to left instead of the typical top to bottom sliding that comes with using .toggle() in jQuery. Specifically, when the hamburger menu is clicked, I want the menu to slide out from right ...

Proper alignment of multiple elements with Bootstrap

I am currently incorporating Bootstrap panels into my project, and I have a design mockup that looks like this: https://i.sstatic.net/pHArl.png The Profile text and progress bar need to be aligned to the left, while the collapse icon should be aligned to ...

Checkbox in Angular FormGroup not triggering touched state

There seems to be an issue with the Angular form when checking if the form is touched, especially in relation to a checkbox element. Despite the value of the checkbox changing on click, I am seeing !newDeviceGroup.touched = true. I'm not quite sure wh ...

Traverse Through Every Column of an HTML Table and Retrieve the Information with jQuery

Trying to extract data from within the <tbody> tags in an HTML table. The structure of each row is as follows: <tbody> <tr> <td>63</td> &l ...

Guide to making a post request with C++ and sockets for a C++ web scraper

In my quest to construct post requests using only C++ and sockets for my C++ web crawler, I am attempting to mimic various form clicks. My current challenge lies in determining the necessary components to include in the header and body of a basic http post ...

The fix for the unresponsive fixed container in Angular 2 Material

I've encountered an issue with CSS and Angular 2 material. Any element with a fixed position doesn't behave as expected inside an md-sidenav-container. However, when it is placed outside the container, it works perfectly. I have created a Plunker ...

Tips for concealing images within a designated list and revealing them in a separate list

I have a question regarding image visibility. Is it possible to hide certain images from a "SHOW ALL" list, but have them appear in a different category list? Below is the code snippet: <section> <ul class="portfolio_filters"> < ...

Show the image in its original form using the Transform feature

What is the best way to use CSS transform to achieve the same look as the image in the 2nd link? I tried skewY for the first image but it's not quite what I'm going for. https://i.sstatic.net/teV9e.jpg https://i.sstatic.net/m0vsh.jpg ...

Concealing elements with a radio button selector

On my website, I'm utilizing PHP to manage contact/subscribe functionality. The form is straightforward with two radio buttons allowing the user to choose between "subscribe" or "contact." If the user selects "contact," I want an additional "Message" ...

Click on the canvas to fill a specific area with JavaScript

My goal is to implement a JavaScript function that will shade specific areas of canvas drawings when clicked. Below is the code I have that draws a square inside a circle. <!DOCTYPE HTML> <html> <head> </head> <body&g ...

Enhancing website interactivity by dynamically updating multiple elements with PHP and jQuery without the need for page refresh

I have a PHP page that incorporates jQuery to allow users to update a specific item without the need for page refreshing. This functionality is used for updating availability for an event where users can choose between Yes, No, or Maybe. Each click on the ...

Is there a way to fix the close button on the menu so that it works more than once?

I have developed a JavaScript-powered navbar, but I am facing an issue with the closing button. It seems to work only once. If I try to open and close the menu repeatedly, the closing button stops working. I suspect there might be an error in my code, but ...

The enigma of CSS: How is the width mysteriously set to 0px with no visible CSS styling

Take a look at this snapshot of a webpage I'm currently designing in Chrome Developer Tools: https://i.sstatic.net/SB00j.png The primary rule in the 'Matched CSS Rules' section indicates that the width of the element should be 160px. Howe ...

Looking to alter the CSS of an ID element when hovering over a link on your website?

Irrespective of the positioning of the links in the html, a simple hover effect can trigger changes like switching images or altering backgrounds anywhere on the website. The ideal solution would involve a straightforward method without the need for Javas ...

Implementing Highchart within a pop-up modal

Currently, I am developing a webpage that utilizes highchart. My goal is to display the same highchart as a modal window when a button is clicked. The technologies I am using include HTML, Bootstrap, and JavaScript. This is the code I have implemented: & ...

The Art of Positioning Containers in CSS

I am facing some issues with my CSS. In the JSP webpage, I have a container styled with a div that works perfectly. However, when I insert another div tag to style certain elements, those elements end up outside of the container for some reason. Below is ...

What is causing this particular area to remain unaffected by the blur effect?

issue I followed a tutorial to create a mouse trailer from this video - https://www.youtube.com/watch?v=kySGqoU7X-s. However, when I tried adding text and other elements inside a div, the blur effect just didn't show up. I attempted using z-index but ...

Post an image to Facebook without using a link

I have a website and I'm looking to share images on Facebook with the click of a button. I've managed to set up image sharing via URL by hosting them on my server. However, I'm curious about other sharing options available. Can images be ...

Is it necessary to download and install plotly if I am using the cdn in my HTML file?

I'm currently developing an online application using Flask. The user input is collected with d3.js and sent to app.py, where it is used for an API call to retrieve the necessary data. This data is then returned in JSON format to JavaScript for renderi ...