[Résolu] Sidenav ne se réduit pas en Burger

Bonjour à tous.
Sur mon site web familial (sans prétention), ma Sidenav ne se réduit pas en burger.
Sur pc la Sidenav disparait lorsque l'on réduit la fenêtre au 1/3. Et évidement la Sidenav n'apparait pas du tout sur les téléphones portables.
L'adresse de mon site : http://www.hague.fr
A votre disposition pour vous fournir des lignes de code si nécessaire.
D'avance merci et cordialement.
Modifié par BruChri (07 Jun 2025 - 14:53)

Bonjour,

Tu utilise Bootstrap qui a un composant nav et des class pour le comportement que tu recherche, le plus simple est de l'utiliser : https://getbootstrap.com/docs/4.1/components/navbar/ .

Ton conteneur où se trouve ta navigation disparaît sans alternative sur les petite résolution à cause de ces deux class que tu lui à attribué : d-none d-xl-block

cdt

Merci gcyrllus.
J'ai supprimé les deux d-none d-xl-block.
Le progrès c'est que je peut réduire ma page au minimum sur pc. Mais je n'ai pas de burger, j'ai la liste de ma sidenav.(voir le fichier)
Merci de ton aide.
Cordialement.

Re Il faut maintenant que tu reprennes les class (et structure) pour ta navigation dans ce que Bootstrap à déjà implémenter dans ses feuilles de styles et js.

exemple bootstrap:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
etc ... 

Ce que tu as :

 <div class="col-10 col-md-8 " data-aos="fade-down">
  <nav class="site-navigation position-relative text-right text-lg-center" role="navigation">
    <ul class="site-menu js-clone-nav mx-auto ">
etc.

Il manque le bouton et les class qui vont bien

Dans la page https://getbootstrap.com/docs/4.1/components/navbar/ , c'est le premier exemple. Reprend la structure. Un petit morceau sert à afficher le burgerMenu , et le reste est surtout jalonné de class. Remplace éventuellement le formulaire avec tes liens sociaux . Ils semble toujours disparaître.

Cdt
Modifié par gcyrillus (07 Jun 2025 - 20:30)

Merci gcyrillus.
Tant bien que mal j'ai à peu près réussi.
Il me manque maintenant à diminuer le fond blanc afin de l'ajuster au burger et au texte.
Et ce même fond blanc le mettre en noir, écriture blanche et burger blanc.
Et là je cale.
Merci de votre aide.


Modifié par BruChri (08 Jun 2025 - 07:52)

Bonjour,

Au lieu de : navbar navbar-expand-lg navbar-light bg-light . Les class navbar navbar-expand-lg navbar-dark devraient convenir pour la barre de navigation .

Cdt

Merci beaucoup, je galère depuis des heures et c'est la bonne solution.
Merci encore de ton temps et de ton savoir gcyrillus.

Sujet clos