Bonjour,

Je rencontre un problème dans mes liens ancre. J'ai une page tout en longueur avec un menu burger bootstrap en offcanvas.

Lorsque j'ouvre le menu burger, le texte s'affiche comme si se n'était pas des liens cliquable. Et en effet mes liens ne sont pas cliquable.

Est ce que sa ne serai pas lié au fait que quand je l'ouvre, si je clique dedans ça le ferme automatiquement (c'est pas voulu c'est un autre souci que je n'arrive pas à régler).

Donc mon problème c'est, comment faire fonctionner mes liens ancre?

Je remercie par avance l'aide qu'on peut m'accorder!

<nav class="navbar navbar-top  navbar-expand-lg  mb-5">
            <div class="container-fluid">
                <a class="  navbar-brand" href="#">VANLERBERGHE Charlie</a>
                <button class="navbar-toggler" id="btnNav" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Menu</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" aria-current="page" href="#background-color">A propos</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Projets</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

Bonjour, quel est le code HTML et CSS complet? Car en l'état le lien vers l'ancre fonctionne.

>> comment faire fonctionner mes liens ancre?

Pour cela il est nécessaire d'avoir ailleurs dans le code un élément avec un attribut id="background-color".  (au passage le nom n'est pas bien choisis)

Relire le cours HTML/CSS de ce site au besoin.

Bonjour,

Mes ancres fonctionnent sur grand écran mais a partir du moment où c'est sur petit écran et que du coup le menu burger s'affiche, cela ne fonctionne plus. Le problème vient du menu burger puisque quand je clique dedans il se ferme. J'ai pourtant copier coller le bloc de code de Bootstrap, c'est pour ça que je ne comprend pas ^^'

Bonjour, sans le code qui nous permettrait de reproduire le problème ou mieux une page en ligne impossible d'apporter une quelconque aide!!

-
Edité par AbcAbc6 6 mars 2024 à 11:43:55