Knowledge.ToString()

Bootstrap 4.4 Responsive Mega Menu Example

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

Comments

17 responses to “Bootstrap 4.4 Responsive Mega Menu Example”

  1. jogindar kumar Avatar
    jogindar kumar

    thanks.
    Excellent work

  2. Faizan Avatar
    Faizan

    Hii Thanks for the proper bootstrap code.

  3. Sufyan Avatar
    Sufyan

    can you please add functionality of dropdownon hover for desktop and share the updated code.

  4. Fida Ullah Avatar
    Fida Ullah

    Excellent work… you done it for top nav bar.. i want it for left side menu, i m mega menu on left side.

  5. shilpa Avatar
    shilpa

    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.

  6. Forrest Avatar
    Forrest

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

    1. Vishal Monpara Avatar
      Vishal Monpara

      Hello Forrest,

      I am glad it worked for your need.

      Regards,
      Vishal Monpara

  7. Miguel Leon Fernandez Avatar
    Miguel Leon Fernandez

    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. Vishal Monpara Avatar
      Vishal Monpara

      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

  8. Misty Avatar
    Misty

    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. Vishal Monpara Avatar
      Vishal Monpara

      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 Avatar
        Misty

        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.

        1. Vishal Monpara Avatar
          Vishal Monpara

          Hi Misty,

          In Bootstrap documentation https://getbootstrap.com/docs/4.3/components/navbar/ under “External Content”, you have a working example. If you are looking for that functionality, it is much easier to achieve than mega menu mentioned here.

          Regards,
          Vishal Monpara

  9. Jubin Varughese Avatar
    Jubin Varughese

    Hi, How to make search option in Navbar work?

    1. Vishal Monpara Avatar
      Vishal Monpara

      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

  10. Michael Hemingway Avatar
    Michael Hemingway

    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. Vishal Monpara Avatar
      Vishal Monpara

      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

Leave a Reply

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