Bootstrap 4 does not have any example of mega menu. Documentation or other websites did not provide any example of mega menu with bootstrap. So after hours of trial and error, I came up with this solution.
Extra CSS classes needed (Optional)
Following class is not available in Bootstrap 4 and hence for pixel perfection it is needed.
.top-auto{top:auto}Sample HTML Code
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="navbar-brand"><a id="pramuimge-logo" title="Pramukh IME" href="https://www.pramukhime.com"><img src="https://www.pramukhime.com/wp-content/uploads/images/pramukhime-logo.png" alt="Pramukh IME home page"/></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.position-static gets rid of relative position -->
<li class="nav-item dropdown position-static"><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="#">Typing Software</a>
<!-- div.w-100 make it mega menu, div.top-auto opens the mega menu exactly as position like other normal menu -->
<div class="dropdown-menu w-100 top-auto">
<div class="container">
<!-- div.w-100 is also needed in certain circumstances to make this menu a mega menu -->
<div class="row w-100">
<!-- It's yours now. Add columns or change layout as per your wish -->
</div>
</div>
</div>
</li>
<li class="nav-item"><a title="Blog" href="https://www.pramukhime.com/blog" class="nav-link">Blog</a>
</li>
<li class="nav-item"><a title="Contact Us" href="https://www.pramukhime.com/contact-us" 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="https://www.pramukhime.com/my-account" class="dropdown-item">Login / Register</a>
</li>
<li class="nav-item">
<a title="Account details" href="https://www.pramukhime.com/my-account/edit-account/" class="dropdown-item">Account details</a>
</li>
<li class="nav-item">
<a title="Orders" href="https://www.pramukhime.com/my-account/orders/" class="dropdown-item">Orders</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>Explanation
This code contains only Bootstrap 4.4 css classes except top-auto. As you notice in the highlighted code lines, position-static and w-100 makes the menu as mega menu.
Here is a full working Bootstrap 4 mega menu HTML sample
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
.top-auto{top:auto}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="navbar-brand"><a id="pramuimge-logo" title="Pramukh IME" href="https://www.pramukhime.com"><img src="https://www.pramukhime.com/wp-content/uploads/images/pramukhime-logo.png" alt="Pramukh IME home page"/></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="#">Typing Software</a>
<div class="dropdown-menu w-100 top-auto">
<div class="container">
<div class="row w-100">
<div class="text-center col-sm-4">
<h3 class="border border-top-0 border-right-0 border-left-0">For Individuals</h3>
<a href="https://www.pramukhime.com/windows-application" class="dropdown-item">Windows Application</a>
<a title="Windows Application" href="https://www.pramukhime.com/windows-application" class="dropdown-item">Windows Application</a>
<a title="Android App" href="https://www.pramukhime.com/android-app" class="dropdown-item">Android App</a>
<a title="FireFox Extension" href="https://www.pramukhime.com/firefox-extension" class="dropdown-item">FireFox Extension</a>
</div>
<div class="text-center col-sm-4">
<h3 class="border border-top-0 border-right-0 border-left-0">For Website Owners</h3>
<a title="WordPress Plugin" href="https://www.pramukhime.com/wordpress-plugin" class="dropdown-item">WordPress Plugin</a>
<a title="Drupal Module" href="https://www.pramukhime.com/drupal-module" class="dropdown-item">Drupal Module</a>
<a title="Joomla Extension" href="https://www.pramukhime.com/joomla-extension" class="dropdown-item">Joomla Extension</a>
</div>
<div class="text-center col-sm-4">
<h3 class="border border-top-0 border-right-0 border-left-0">For Developers</h3>
<a title="JavaScript Library" href="https://www.pramukhime.com/javascript-library" class="dropdown-item">JavaScript Library</a>
<a title="TinyMCE Plugin" href="https://www.pramukhime.com/tinymce-plugin" class="dropdown-item">TinyMCE Plugin</a>
<a title="CKEditor Plugin" href="https://www.pramukhime.com/ckeditor-plugin" class="dropdown-item">CKEditor Plugin</a>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item"><a title="Blog" href="https://www.pramukhime.com/blog" class="nav-link">Blog</a>
</li>
<li class="nav-item"><a title="Contact Us" href="https://www.pramukhime.com/contact-us" 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="https://www.pramukhime.com/my-account" class="dropdown-item">Login / Register</a>
</li>
<li class="nav-item">
<a title="Account details" href="https://www.pramukhime.com/my-account/edit-account/" class="dropdown-item">Account details</a>
</li>
<li class="nav-item">
<a title="Orders" href="https://www.pramukhime.com/my-account/orders/" class="dropdown-item">Orders</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Enlightening Essays</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3>Developing a Child’s Mind Through Meditation</h3>
<p>In today’s modern scientific age, one of India’s great contributions to global civilization is coming to the forefront – the practice of dhyan and mansi puja, or meditation. In fact, recent research has revealed that teaching children meditation and encouraging its daily practice provides them with the mental stability to cope with the rigours of today’s fast-paced lifestyle...<a href="https://www.baps.org/EnlighteningEssays/2018/Developing-a-Childs-Mind-Through-Meditation-14887.aspx"> More...</a></p>
</div>
<div class="col-sm-6">
<h3>The Science and Spirituality of Fasting</h3>
<p>American scientist and author, Benjamin Franklin, advised, “The best of all medicines is rest and fasting.” Mark Twain’s experience was similar, “A little starvation can really do more for the average sick man than can the best medicines and the best doctors. I do not mean a restricted diet. I mean total abstention from food for one or two days. I speak from experience. <a href="https://www.baps.org/EnlighteningEssays/2018/The-Science-and-Spirituality-of-Fasting-(Part-1)-14048.aspx">More...</a></p>
</div>
</div>
</div>
</body>
</html>
More complex mega menu is also available at my Pramukh IME site.
Leave a Reply