Bootstrap 4.4 Mega Menu Example

Category: CssTags: ,

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.

Share

13 comments

Your email address will not be published. Required fields are marked *

  1. shilpa says:

    Hi ,
    Thanks for this solution . Recently I tried many solutions for megamenu using only html and css , but of no use . The given Html code is very useful.

    one more thing :I found below site ,
    https://mdbootstrap.com/docs/jquery/navigation/mega-menu/

    the above one is very useful , but includes html css and jquery which is typical to use with angular 9.

  2. Forrest says:

    Thank you for providing this brief but useful tutorial. I searched longer than I expected before finding one that worked correctly. Thank you.

    1. Hello Forrest,

      I am glad it worked for your need.

      Regards,
      Vishal Monpara

  3. Miguel Leon Fernandez says:

    Thank you Vishal Monpara, for sharing your knowledge. Please, you can indicate how to put the menu vertically to the left.

    Thank you
    From Quito.- Ecuador

    1. Hello Quito,

      Once you have full width mega menu, you should be able to change the content the way you want. If you already have HTML that shows vertical menu of the left side, copy that HTML inside mega menu and it will work.

      Regards,
      Vishal Monpara

  4. Misty says:

    Thank you for the example. Have you any example of pushing the content down with the dropdown? How did you accomplish the push? I have tried several methods, nothing seems to work keeping it with HTML and CSS. I am wanting the content of the page to show when the dropdown mega menu is open.
    Thanks for your help in advance.

    1. Hello Misty,

      It is difficult to envision what you are trying to achieve but as far as you have full control over content, I don’t see any reason why you would not be able to achieve the desired result.

      Regards,
      Vishal Monpara

      1. Misty says:

        Hi Vishal,

        In your example above the dropdown mega menu covers the content when it is open. I’m ask how to use your example and have it not cover the content. When the mega menu is open, how do I make the content show directly below the mega menu?
        Thanks for your patience.

  5. Jubin Varughese says:

    Hi, How to make search option in Navbar work?

    1. Hello Jubin,

      I don’t have handy example but I remember looking at examples on Bootstrap site which had search option in navbar.

      Regards,
      Vishal Monpara

  6. Michael Hemingway says:

    Extremely helpful and useful. Thanks so much. Solved a problem I was working on for weeks. Is there a reason you did not incorporate a search bar?

    1. Hello Michael,

      I did not want to add search bar but using this example you can add search bar or any other Bootstrap functionality.

      Regards,
      Vishal Monpara