Mega Menu

You can use the Mega Menus using the Bootstrap Columns. Try using the Following code:

Code Example

<nav class="primary-menu">

	<ul class="menu-container">
		<li class="menu-item mega-menu">
			<a class="menu-link" href="#"><div>Shortcodes</div></a>
			<div class="mega-menu-content">
				<div class="container">
					<div class="row">
						<!-- Column 1 -->
						<ul class="sub-menu-container mega-menu-column col-lg-3">
							<li class="menu-item">
								<a class="menu-link" href="animations.html"><div><i class="icon-magic"></i>Animations</div></a>
							</li>
							<li class="menu-item">
								<a class="menu-link" href="buttons.html"><div><i class="icon-link"></i>Buttons</div></a>
							</li>
							<li class="menu-item">
								<a class="menu-link" href="carousel.html"><div><i class="icon-heart3"></i>Carousel</div></a>
							</li>
						</ul>

						<!-- Column 2 -->
						<ul class="sub-menu-container mega-menu-column col-lg-3">

							...

						</ul>
					</div>
				</div>
			</div>
		</li>
	</ul>

</nav>

Full Mega Menus

Simply add the .mega-menu-full Class to the .mega-menu Element to make the Mega Menus Full Width relative to the Viewport.

<li class="menu-item mega-menu mega-menu-full">

Note:

Find an example here

Widgets in Mega Menu

You can now add any Content in Mega Menus. Try using the following code:

<ul class="sub-menu-container mega-menu-column col-lg-3">
	<li class="menu-item">
		<div class="widget">

			<h4>Our Location</h4>

			<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d202117.45988409253!2d144.81557611671303!3d-37.81732634202082!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4c2b349649%3A0xb6899234e561db11!2sEnvato!5e0!3m2!1sen!2sin!4v1456564509271" width="600" height="400" allowfullscreen></iframe>

		</div>
	</li>
</ul>

Make sure that you always add the Custom Mega Menu Content inside the .widget DIV for best compatibility.

Smaller Mega Menu

Add the .mega-menu-small Class to the .menu-item.mega-menu Element to display a Smaller Mega Menu.

<li class="menu-item mega-menu mega-menu-small"><a class="menu-link" href="#"><div>Women</div></a>
	<div class="mega-menu-content mega-menu-style-2">
		<div class="container">
			<div class="row">
				<ul class="sub-menu-container mega-menu-column col-lg-6">
					<li class="menu-item mega-menu-title"><a class="menu-link" href="#"><div>Footwear</div></a>
						<ul class="sub-menu-container">
							<li class="menu-item"><a class="menu-link" href="#"><div>Casual Shoes</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Formal Shoes</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Sports shoes</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Flip Flops</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Slippers</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Sports Sandals</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Party Shoes</div></a></li>
						</ul>
					</li>
				</ul>
				<ul class="sub-menu-container mega-menu-column col-lg-6">
					<li class="menu-item mega-menu-title"><a class="menu-link" href="#"><div>Clothing</div></a>
						<ul class="sub-menu-container">
							<li class="menu-item"><a class="menu-link" href="#"><div>Casual Shirts</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>T-Shirts</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Collared Tees</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Pants / Trousers</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Ethnic Wear</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Jeans</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Sweamwear</div></a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</li>

Last Modified: June 4, 2020

Need Help?