Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"MegaMenu in bootstrap 4 "
Bootstrap 4.1.1 Snippet by
ayaz11244
4.1.1
Preview
HTML
CSS
View Full Screen
Fork
Fork this
1.7K
 
1 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-expand-md navbar-dark bg-dark"> <div class="container"> <div class="navbar-brand"><a href="#" class="nav-link p-0">Logo</a></div> <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#main-nav-1" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="main-nav-1"> <ul class="navbar-nav"> <li class="nav-item dropdown position-static"><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="#">MegaMenu</a> <div class="dropdown-menu w-100 top-auto"> <div class="container"> <div class="row w-100"> <div class="text-center col-sm-3"> <h4 class="border border-top-0 border-right-0 border-left-0">For Individuals</h4> <a href="#" class="dropdown-item">Windows Application</a> <a href="#" title="Windows Application" href="#" class="dropdown-item">Windows Application</a> <a title="Android App" href="#" class="dropdown-item">Android App</a> <a title="FireFox Extension" href="#" class="dropdown-item">FireFox Extension</a> </div> <div class="text-center col-sm-3"> <h4 class="border border-top-0 border-right-0 border-left-0">For Website Owners</h4> <a title="WordPress Plugin" href="#" class="dropdown-item">WordPress Plugin</a> <a title="Drupal Module" href="#" class="dropdown-item">Drupal Module</a> <a title="Joomla Extension" href="#" class="dropdown-item">Joomla Extension</a> </div> <div class="text-center col-sm-3"> <h4 class="border border-top-0 border-right-0 border-left-0">For Developers</h4> <a title="JavaScript Library" href="#" class="dropdown-item">JavaScript Library</a> <a title="TinyMCE Plugin" href="#" class="dropdown-item">TinyMCE Plugin</a> <a title="CKEditor Plugin" href="#" class="dropdown-item">CKEditor Plugin</a> </div> <div class="text-center col-sm-3"> <h4 class="border border-top-0 border-right-0 border-left-0">For Website Owners</h4> <a title="WordPress Plugin" href="#" class="dropdown-item">WordPress Plugin</a> <a title="Drupal Module" href="#" class="dropdown-item">Drupal Module</a> <a title="Joomla Extension" href="#" class="dropdown-item">Joomla Extension</a> </div> </div> </div> </div> </li> <li class="nav-item"><a title="Blog" href="#" class="nav-link">Blog</a> </li> <li class="nav-item"><a title="Contact Us" href="#" class="nav-link">Contact Us</a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item dropdown"> <a title="My Account" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link">My Account</a> <ul class="dropdown-menu"> <li class="nav-item"> <a title="Login / Register" href="#" class="dropdown-item">Login / Register</a> </li> <li class="nav-item"> <a title="Account details" href="#" class="dropdown-item">Account details</a> </li> <li class="nav-item"> <a title="Orders" href="#" class="dropdown-item">Orders</a> </li> </ul> </li> </ul> </div> </div> </nav>
.top-auto{top:auto}
Related:
See More
Free Template
Gaia Bootstrap Template
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76