xxxxxxxxxx1
<!-- Navbar -->2
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">3
<div class="container-fluid">4
<a class="navbar-brand" href="#">Brand</a>5
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#main_nav" aria-controls="main_nav" aria-expanded="false" aria-label="Toggle navigation">6
<i class="fas fa-bars"></i>7
</button>8
<div class="collapse navbar-collapse" id="main_nav">9
<ul class="navbar-nav ms-auto">10
<li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>11
<li class="nav-item"><a class="nav-link" href="#"> About </a></li>12
<li class="nav-item"><a class="nav-link" href="#"> Services </a></li>13
<li class="nav-item dropdown has-megamenu">14
<a class="nav-link dropdown-toggle" href="#" data-mdb-toggle="dropdown"> Mega menu </a>15
<div class="dropdown-menu megamenu" role="menu">16
<div class="row g-3">17
<div class="col-lg-3 col-6">18
<div class="col-megamenu">19
<h6 class="title">Title Menu One</h6>20
<ul class="list-unstyled">21
<li><a href="#">Custom Menu</a></li>22
<li><a href="#">Custom Menu</a></li>23
<li><a href="#">Custom Menu</a></li>24
<li><a href="#">Custom Menu</a></li>25
<li><a href="#">Custom Menu</a></li>26
<li><a href="#">Custom Menu</a></li>27
</ul>28
</div> <!-- col-megamenu.// -->29
</div><!-- end col-3 -->30
<div class="col-lg-3 col-6">31
<div class="col-megamenu">32
<h6 class="title">Title Menu Two</h6>33
<ul class="list-unstyled">34
<li><a href="#">Custom Menu</a></li>35
<li><a href="#">Custom Menu</a></li>36
<li><a href="#">Custom Menu</a></li>37
<li><a href="#">Custom Menu</a></li>38
<li><a href="#">Custom Menu</a></li>39
<li><a href="#">Custom Menu</a></li>40
</ul>41
</div> <!-- col-megamenu.// -->42
</div><!-- end col-3 -->43
<div class="col-lg-3 col-6">44
<div class="col-megamenu">45
<h6 class="title">Title Menu Three</h6>46
<ul class="list-unstyled">47
<li><a href="#">Custom Menu</a></li>48
<li><a href="#">Custom Menu</a></li>49
<li><a href="#">Custom Menu</a></li>50
<li><a href="#">Custom Menu</a></li>51
<li><a href="#">Custom Menu</a></li>52
<li><a href="#">Custom Menu</a></li>53
</ul>54
</div> <!-- col-megamenu.// -->55
</div> 56
<div class="col-lg-3 col-6">57
<div class="col-megamenu">58
<h6 class="title">Title Menu Four</h6>59
<ul class="list-unstyled">60
<li><a href="#">Custom Menu</a></li>61
<li><a href="#">Custom Menu</a></li>62
<li><a href="#">Custom Menu</a></li>63
<li><a href="#">Custom Menu</a></li>64
<li><a href="#">Custom Menu</a></li>65
<li><a href="#">Custom Menu</a></li>66
</ul>67
</div> <!-- col-megamenu.// -->68
</div><!-- end col-3 -->69
</div><!-- end row --> 70
</div> <!-- dropdown-mega-menu.// -->71
</li>72
</ul>73
</div> <!-- navbar-collapse.// -->74
</div> <!-- container-fluid.// -->75
</nav>76
<!-- Navbar -->xxxxxxxxxx1
.navbar .megamenu{ padding: 1rem; }2
3
/* ============ desktop view ============ */4
@media all and (min-width: 992px) {5
6
.navbar .has-megamenu{position:static!important;}7
.navbar .megamenu{left:0; right:0; width:100%; margin-top:0; }8
9
} 10
/* ============ desktop view .end// ============ */11
12
/* ============ mobile view ============ */13
@media(max-width: 991px){14
.navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{15
overflow-y: auto;16
max-height: 90vh;17
margin-top:10px;18
}19
}20
/* ============ mobile view .end// ============ */21
22
@media all and (min-width: 992px) {23
.navbar .dropdown-menu-end{ right:0; left: auto; }24
.navbar .nav-item .dropdown-menu{ display:block; opacity: 0; visibility: hidden; transition:.3s; margin-top:0; }25
.navbar .nav-item:hover .nav-link{ color: #fff; }26
.navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }27
.navbar .dropdown-menu.fade-up{ top:180%; }28
.navbar .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); }29
}1
1
Console errors: 0