problème Button navbar bootstrap5

Deruel Roland
Les bases HTML/CSS

Bonjour j'ai un souci avecmon boutton navbar fonctionne bien sur pc mais sur device il reste figé

Ce que je veux

Souhaiterais que mon bouton soit actif sur device

Ce que j'obtiens

Bonjour figé

code

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#"><img src="img/logo.png" alt="" /></a>
        <button
    class="navbar-toggler"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#barMenu"
    aria-expanded="false"
    aria-controls="barMenu"
>
    <span class="navbar-toggler-icon"></span>
</button>
        <div
          class="collapse navbar-collapse justify-content-end"
          id="navbarNav"
        >
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link"  href="index.php">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="services.php">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="gallery.php">Gallery</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about.php">About</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

1 réponse

tiwux

Bonjour, il semble y avoir une discordance dans les attributs data-bs-target et id que vous utilisez.

Dans le bouton de bascule, vous avez data-bs-target="#barMenu", mais dans la structure de la barre de navigation, l'ID de la section de menu est défini comme navbarNav. j'aurai peut etre essayé comme ca :

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/logo.png" alt="" /></a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav" <!-- Assurez-vous que l'ID correspond -->
aria-expanded="false"
aria-controls="navbarNav"

<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-end"
id="navbarNav"

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.php">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.php">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">About</a>
</li>
</ul>
</div>
</div>
</nav>