bootstrap mega menu responsive

<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"> Mega Dropdown </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="dropdown-header">Services</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="dropdown-header">Technologies</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="dropdown-header">Outils</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>

bootstrap mega menu responsive examples

<!-- first is the link in your navbar -->
<a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>

<!-- your mega menu starts here! -->
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="servicesDropdown">

<!-- the standard dropdown items --> 
 <a class="dropdown-item" href="#">What we do</a>
 <a class="dropdown-item" href="#">How we fit your needs</a>

<!-- next, a divider to tidy things up -->
 <div class="dropdown-divider"></div>

<!-- finally, using flex to create your layout -->
 <div class="d-md-flex align-items-start justify-content-start">
  
  <div>   
   <div class="dropdown-header">Development</div>
   <a class="dropdown-item" href="#">Bespoke software</a>
   <a class="dropdown-item" href="#">Mobile apps</a>
   <a class="dropdown-item" href="#">Websites</a>
  </div>
                               
  <div>
   <div class="dropdown-header">Professional Services</div>
   <a class="dropdown-item" href="#">Project rescue</a>
   <a class="dropdown-item" href="#">Source code recovery</a>
   <a class="dropdown-item" href="#">Application support & maintenance</a>
  </div>
                                
  <div>
   <div class="dropdown-header">Fixed Price Services</div>
   <a class="dropdown-item" href="#">Add cookie consent</a>
   <a class="dropdown-item" href="#">Add captcha</a>
   <a class="dropdown-item" href="#">Add core data</a>
   <a class="dropdown-item" href="#">Custom error pages</a>
   <a class="dropdown-item" href="#">Contact form creation</a>
   <a class="dropdown-item" href="#">Automated backups</a>
   <a class="dropdown-item" href="#">Image to HTML</a>
  </div>
 </div>
</div>

Posted by: Guest on April-08-2021

Source

Code answers related to "bootstrap mega menu responsive"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "bootstrap mega menu responsive"

Code answers related to "bootstrap mega menu responsive"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us