Bonjour tout le monde,

Petit problème depuis ce matin. J'ai mis sur mon site un menu burger de bootstrap avec des ancres sur mon one page. Les ancres ne fonctionnent absolument pas. Je ne sais pas pourquoi ...

    /*Menu burger */
    $html .= '          <nav class="navbar">';
    $html .= '              <div class="container-fluid">';
    $html .= '                  <a class="navbar-brand" href="#"></a>';
    $html .= '                      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">';
    $html .= '                          <span class="navbar-toggler-icon"></span>';
    $html .= '                      </button>';
    $html .= '                      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">';
    
    $html .= '                          <div class="offcanvas-body">';
    $html .= '                          <div class="offcanvas-header">';
    $html .= '                              <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Menu</h5>';
    $html .= '                              <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>';
    $html .= '                          </div>';
    $html .= '                              <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">';
    $html .= '                                  <li class="nav-item">';
    $html .= '                                                  <a class="nav-link active" aria-current="page" href="#section2">Home</a>';
    $html .= '                                  </li>';
    $html .= '                                  <li class="nav-item">';
    $html .= '                                      <a class="nav-link" href="#section3">Prodij</a>';
    $html .= '                                  </li>';
    $html .= '                                  <li class="nav-item">';
    $html .= '                                      <a class="nav-link" href="#section4">Dessins</a>';
    $html .= '                                  </li>';
    $html .= '                                  <li class="nav-item">';
    $html .= '                                      <a class="nav-link" href="#">Contact</a>';
    $html .= '                                  </li>';
    $html .= '                              </ul>';
    $html .= '                          </div>';
    $html .= '                      </div>';
    $html .= '              </div>';
    $html .= '          </nav>';

Si quelqu'un a déjà été confronté à ce problème. Merci d'avance.

Bonjour,

peux-tu fournir le html généré ? Ce que tu donnes est assez illisible

Définis "ne fonctionnent pas" : que se passe-t-il ? Est-ce que l'ancre se retrouve quand même dans l'url ?

<nav class="navbar">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" href="#section1">Test1</a> 
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section2">Test2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section3">Test3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section4">Test4</a>
          </li>
        </ul>
        
      </div>
    </div>
  </div>
</nav>

<div id="section1">
   <p>Test1</p>
</div>
<div id="section2">
   <p>Test2</p>
</div>
<div id="section3">
   <p>Test3</p>
</div>
<div id="section4">
   <p>Test4</p>
</div>

L'ancre est bien dans l'url.

Quand je clique sur test1, la page scroll bien en fond (voir cadre rouge).

Mais dès que je ferme le menu en cliquant sur la croix, la page revient à l'état initiale, c'est à dire en haut de page.

-
Edité par CBL3 26 janvier 2023 à 5:14:36