Bonjour,
Je souhaite intégrer un mega-dropdown dans la barre nav-menu, comme celui-ci :
https://bootstrap-menu.com/demos/megamenu.htmlJ'arrive a le structurer avec plusieurs colonnes, mais je ne parviens pas à l'afficher sur toute la largeur comme vous pouvez le voir sur le screen joint.
Cela semble de passer par ici :
<div class="d-flex align-items-start flex-column flex-sm-row p-3">
il faut certainement indiquer un "left:0; right:0; width:100%;" a ce niveau, mais je ne vois pas comment.
Ci-dessous la partie megamenu au complet :
<!-- begin custom menus - customize these for your system -->
<!-- MEGAMENU -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Megamenu
</a>
<div class="dropdown-menu pt-0" aria-labelledby="navbarDropdown">
<img src="./img/cover.jpg" class="img-fluid" alt="" >
<div class="d-flex align-items-start flex-column flex-sm-row p-3">
<div>
<div class="nav-item dropdown"><b>Services</b></div>
<a class="dropdown-item" href="#" >Développement web</a>
<a class="dropdown-item" href="#" >Développement mobile</a>
<a class="dropdown-item" href="#" >UX et Design</a>
<a class="dropdown-item" href="#" >Infographie</a>
</div>
<div>
<div class="nav-item dropdown"><b>Techno</b></div>
<a class="dropdown-item" href="#" >HTML et CSS</a>
<a class="dropdown-item" href="#" >BOOTSTRAP</a>
<a class="dropdown-item" href="#" >PHP et LARAVEL</a>
<a class="dropdown-item" href="#" >JAVASCRIPT et VUE.JS</a>
</div>
<div>
<div class="nav-item dropdown"><b>Outils</b></div>
<a class="dropdown-item" href="#" >Visual Studio Code</a>
<a class="dropdown-item" href="#" >Laragon</a>
<a class="dropdown-item" href="#" >Google Chrome</a>
<a class="dropdown-item" href="#" >Windows 10</a>
</div>
<div>
<div class="nav-item dropdown"><b>Outils</b></div>
<a class="dropdown-item" href="#" >Visual Studio Code</a>
<a class="dropdown-item" href="#" >Laragon</a>
<a class="dropdown-item" href="#" >Google Chrome</a>
<a class="dropdown-item" href="#" >Windows 10</a>
</div>
</div>
</div>
</li>
<!-- end MEGAMENU -->