CODEWITHSUNDEEP
htmltwitter-bootstrap
gerlinp
gerlinp

Reputation: 49

adding data-bs-toggle & data-bs-target breaks link

Using Bootstrap I created a navbar. I wanted to have the navbar collapse after a clicking on a link. When adding the data-bs-toggle & data-bs-target the navbar does revert , but it breaks the link. If anyone can point out what I am doing wrong I would greatly appreciate it.

here is a demo JsFiddle

      <div class="container">
        <a class="navbar-brand" href="#home"><span class="logo great-vibes">Drip N Dip</span> </a>
        <div class="nav-button">
          <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>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#home"  data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#menu">Menu</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#gallery">Gallery</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>```

Upvotes: 4

Views: 4180

Answers (1)

Mirjam
Mirjam

Reputation: 61

Had the same problem and found a workaround. Simply wrap your link names with a span-tag and the needed data-attributes.

<a class="nav-link" href="#home">
  <span data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
    Home
  </span>
</a>

Find the original here: Adding data-toggle & data-target breaks Nav links

Upvotes: 6

Related Questions