"MegaMenu in bootstrap 4 "
Bootstrap 4.1.1 Snippet by ayaz11244

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
.top-auto{top:auto}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: