What could be causing the Navbar Collapse feature to malfunction in my Bootstrap setup?

Hey there,

I'm facing an issue with the Bootstrap navbar collapse button not working. I've tried everything, followed all the steps in a tutorial, but still can't get it to function properly without altering the Signup and Login buttons. Can someone assist me with this problem?

Below is the HTML code snippet:

<body>
  <nav class="navbar navbar-expand-md navbar-fixed-top navbar-light bg-white shadow-sm p-4 mb-5">
    <div class="container-fluid">
      <div class="nav-header">
        <button type="button" class="navbar-toggler position-absolute start-1" data-toggle="collapse" data-target=".navbar-submenu">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="col-md">
          <a class="navbar-brand" href="#">
            <img src="res/logo.png" width="40" height="40" class="" alt=""></img><b> Tbadel.ma</b>
          </a>
        </div>
     </div>
     <div class="collapse navbar-collapse navbar-submenu">
        <ul class="nav nav-items-row position-absolute end-0">
          <ul class="col-md">
           <li><a href="#" class="nav-signup">S'identifier</a></li>
         </ul>
          <ul class="col-md">
          <li><a href="#" class="nav-login">Se connecter</a></li>
        </ul>
      </ul>
         </div>
        </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</body>
htmlcssbootstrap-5

Answer №1

Bootstrap5 introduces some changes in tags, such as data-toggle being replaced by data-bs-toggle and data-target changing to data-bs-target.

When using data-bs-target, you target the id of a div instead of a class.

body{
  background-color: #F7F7F7;
  font-family: Montserrat-Medium;
}

ul{
  list-style-type:none;
}

.navbar-brand{
  color: black;
  font-family: Montserrat-Medium;
  margin-left: 150px;
  text-align: center;
}
.nav-brand-text{
}
.navbar-toggler {
  z-index: 1;
}
.nav-signup{
  background-color: #5E99EF;
  color: white;
  border: none;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 4px;
  border-radius: 46px;
}
.nav-signup:hover{
  background-color: #4E83CF;
  color: #EAEAEA;
}

.nav-login{
  border: 5px solid black;
  border-color: #5E99EF;
  color: #5E99EF;
  padding: 11px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 4px;
  border-radius: 46px;
  white-space: nowrap;
}
.nav-login:hover{
  color: #4E83CF;
  background-color: #EAEAEA;
}

.nav-items-row{
  margin-right: 150px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-light bg-white shadow-sm p-4 mb-5">
  <div class="container-fluid">
    <div class="nav-header">
      <button type="button" class="navbar-toggler position-absolute start-1 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-submenu" aria-expanded="false">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="col-md">
        <a class="navbar-brand" href="#">
          <img src="res/logo.png" width="40" height="40" class="" alt=""><b> Tbadel.ma</b>
        </a>
      </div>
   </div>
   <div class="collapse navbar-collapse" id="navbar-submenu">
      <ul class="nav nav-items-row position-absolute end-0">
        <ul class="col-md">
         <li><a href="#" class="nav-signup">Sign Up</a></li>
       </ul>
        <ul class="col-md">
        <li><a href="#" class="nav-login">Log In</a></li>
      </ul>
    </ul>
  </div>
</div>
</nav>


<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3909c8196b3c1ddcaddc2">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a7a61666167746555203b253b25387770617426">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>

</body>

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

The Bootstrap menu does not seem to be affecting the positioning of the body text

I recently came across an issue with a Bootstrap-based site I'm working on. When I click the hamburger menu on mobile view, the main content doesn't shift down to accommodate it, causing an overlap. Not ideal :-( Here's my Demo: https://js ...

jqueryhtmlcsstwitter-bootstrap

Creating a Vertical Navbar Dropdown in Bootstrap 3.0 Without Appending to the Last List Item Only

Currently, I'm in the process of creating a panel layout that features an elegant vertical navbar. Although everything seems to be aligned correctly and I've managed to implement a dropdown menu in a vertical layout, it keeps appending to the las ...

javascriptjqueryhtmlcsstwitter-bootstrap

Developing an Addon for Firefox using XUL and JavaScript

I am interested in creating a Firefox Addon that dynamically generates a button in the webpage's DOM when a specific page like www.google.com is loaded. This button, when clicked, will redirect to another page such as www.stackoverflow.com. It is imp ...

javascripthtmlfirefoxfirefox-addonxul

Ways to navigate to a different page using HTML response from an AJAX request

After receiving an HTML document as a response from an AJAX call, I need to create a redirection page using this HTML response. Can anyone provide guidance on how to achieve this? ...

javascripthtmlajaxhttp-redirect

jQuery replacing spaces in id names

I'm encountering an issue with the following HTML and jQuery code. The problem seems to be related to the space in the ID name. HTML <span id="plus one">Plus One</span> jQuery $("#plus one").hide(); Since I'm unable to change the ...

jqueryhtml

Material-UI Grid in Full Width Mode is malfunctioning

I've been delving into the Material-UI@next grid layout system to grasp its intricacies. What I'm aiming for is to have two papers that stretch across the entire width of the screen and collapse into one paper when the screen size shrinks. The d ...

cssreactjsmaterial-designmaterial-ui

Is it possible to convert xaml to html in a silverlight newsletter?

Currently, I am working on a project that involves creating a webpage where my admin can send emails directly through the website. To achieve this functionality, I have implemented a code snippet to send emails to all subscribers. foreach (Subscription pe ...

c#htmlsilverlightemailxaml

Retrieve the initial image link from a blogger's post in cases where it is not being stored on the Blogger platform for use in related

I am currently using a hosting service to store the images that I include on my blogger platform. However, I have encountered an issue where blogger does not automatically fetch the image url to use as the thumbnail when the image is hosted externally. C ...

javascriptjqueryhtmlcssblogger

The Angular Animation constantly resets with each new action taken

In my Angular project, I am working on a scaling animation for a list. I want the animation to only trigger when specific buttons (red and green) are pressed. Currently, the animation restarts regardless of what I click on. Can anyone help me troubleshoot ...

javascripthtmlnode.jsangulartypescript

Ensure that all form data is cleared upon the user clicking the back button

Is there a way to automatically clear the contact form data when a user navigates back in their browser? This would help prevent spammers from submitting the form multiple times by constantly clicking back and resubmitting. ...

phphtml

How to Create a Floating DIV with CSS

Here is the URL I am referring to: Website I want to position the Weather DIV above other content on the page while still maintaining its position when expanded or collapsed. How can I achieve this without affecting the layout of other elements? This is ...

htmlcss

Determine the total cost based on the quantity purchased

I created a webpage for employees to select an item from a dropdown menu, and it will automatically display the price of that item. Check out my code below: <script> $(document).ready(function() { $('#price_input').on('change' ...

javascriptjqueryhtml

Does adding the Angular bootstrap script at the end of the body tag impact webpage speed more than using ng-app on the body tag?

In the past, we had placed ng-app on the body tag which led to problems with dependency injection when multiple modules were being used on the same webpage. This required module creators to be aware of the existing app and inject their app into it. We are ...

javascriptjqueryhtmlangularjstwitter-bootstrap

The function I created is having trouble connecting to the controller.js file

My JavaScript controller file function ServicesCtrl($scope) { console.log("Greetings from ServicesCtrl"); $scope.message = "Hello!"; } The main HTML file <html> <head> <title>The Complete Web Development Stack</ti ...

htmlangularjsangularjs-controller

The enigmatic appearance of CSS border-image using a transparent image creates a visible edge when viewed

My website, located at , features a unique design element created using the CSS border-image property and a .png image with a transparent edge, giving the appearance of torn paper on the divs. However, I have encountered an issue specifically on my Android ...

androidcsstransparencyborder-image

completing data tables and presenting them to clients

I am currently working on a website for a Nutrition specialist who requires a monthly diet regimen table with five meals daily. The doctor will be responsible for completing these tables, which will then be presented to clients. It's important that th ...

javascripthtmlcssnode.jsexpress

What is the best way to create a grid layout that is responsive using HTML and CSS

I have been searching all over the internet and have not been able to find a grid layout like this. The "grid-template-columns" property is not achieving what I need, as I cannot make one box larger than the others. I am looking to create 4 equal boxes an ...

htmlcsscss-grid

What's the best way to preserve the aspect ratio of my background image while utilizing background-size: cover;?

I have a background image that I'm working with. Is there a way to preserve the aspect ratio of the image even when using background-size: cover;? Currently, the image fits perfectly on the screen but appears slightly distorted. I've experimented ...

htmlcssdebugging

I'm curious as to why a webpage tends to load more quickly when CSS files are loaded before script files. Can anyone shed some

While watching a video, I came across some concepts that were a bit difficult for me to grasp. The video mentions that scripts are 'serialized' and can block subsequent files from loading. According to this explanation, Script 1 would load first ...

javascripthtmlcss

Determine the aspect ratio with a constant adjustment using CSS/SCSS

I am trying to adjust the aspect ratio of a responsive div to create a square shape with an offset. I want the height to be equal to the width plus the specified offset. Here is an example of what I am attempting: .div { width: 100%; aspect-ratio: 1 / ...

htmlcsssassresponsive-designcore-web-vitals