'Bootstrap V5 data-bs-toggle only shows collapse, doesnt hide it, any alternatives?

As stated in the title, due to some internal issue of data-bs-toggle in a newer version of bootstrap, it only collapses and does not hide it afterward, and after reading a similar post about this issue https://github.com/twbs/bootstrap/issues/32643 where they addressed it, they didn't include any alternative in meantime, and as I am a beginner in web development, I am unsure what would be the best approach to do the same feature?

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

 <nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
    <div class="container">
      <a class="navbar-brand logoText" href="#">Power<span style="color:#0ac1ce;" class="logoText">In</span>Button</a>


      <!--Only collapses and does not hide (problem of V5 engine data-bs-toggle)-->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <div class="mx-auto"></div>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-white" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/blog">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/cv">CV</a>
          </li>
          <li class="nav-item me-4">
            <a class="nav-link text-white" href="/contact">Contact</a>
          </li>

Solution 1:^[1]

I don't see any problem. Please check if you included both css and js links properly and I see you are using text-white which makes the text like invisible if you are not having a dark theme or any contrast background by default.

 <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
      crossorigin="anonymous"
    ></script>
<div class="container">
      <a class="navbar-brand logoText" href="#"
        >Power<span style="color: #0ac1ce;" class="logoText">In</span>Button</a
      >

      <!--Only collapses and does not hide (problem of V5 engine data-bs-toggle)-->
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <i class="navbar-toggler-icon">menu</i>
      </button>
     
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-black" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-black" href="/about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-black" href="/blog">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-black" href="/cv">CV</a>
          </li>
          <li class="nav-item me-4">
            <a class="nav-link text-black" href="/contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>

Solution 2:^[2]

Here your issue is with the Text-color being white There is a class in bootstrap bg-dark Giving that to nav will change the background color so you can see the text ...

And the issue u mentioned is for modal collapse, not navbar

Here is the updated code

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

 <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark p-md-3">
    <div class="container">
      <a class="navbar-brand logoText" href="#">Power<span style="color:#0ac1ce;" class="logoText">In</span>Button</a>


      <!--Only collapses and does not hide (problem of V5 engine data-bs-toggle)-->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <div class="mx-auto"></div>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-white" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/blog">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/cv">CV</a>
          </li>
          <li class="nav-item me-4">
            <a class="nav-link text-white" href="/contact">Contact</a>
          </li>

Solution 3:^[3]

I have this issue with bootstrap 5 and vue3, and made a function onclick, that looks like this:

toggleMenu() {
  try {
    let el = document.getElementById('navbarCollapse');
    if (el) {
      el.classList.toggle('show');
    }
  } catch (error) {
    console.error(error);
  }
},

which is simply called from the button click. I removed the data-bs-... properties from the button, naturally.

<button class="navbar-toggler" @click="toggleMenu()" type="button" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

The idea is to just toggle the 'show' class on the collapsible part of the menu.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Amal nandan
Solution 3	Herbert Van-Vliet

'Bootstrap V5 data-bs-toggle only shows collapse, doesnt hide it, any alternatives?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]