Responsive Bootstrap Mega Menu with Contact Form, Video, Google Map etc

Last modified on September 11th, 2017 by Karthikeyan K

Now a days everyone wants to replace their normal style menu into Bootstrap Mega Menu. Bootstrap Menu is the Latest design trend in our web design used by top popular eCommerce sites and it will work on all platforms

Mega Menus allow you to see all the features available to the user at one shot and dont require users to drill down into further sub navigation as needed.

Bootstrap Mega Menu are common on e-commerce sites because they typically include a lot of categories of different products, and so Mega menu can be always very useful for visitors & users.

Bootstrap Mega Menu

If its responsive megamenu, then your visitors will be able to access it via mobile device also..

I am going to tell you how to create a Responsive Bootstrap Mega Menu with powerful navigation where you can able to add videos, google map, contact form, advertisements & other major stuffs.

I have used Twitter Bootstrap CSS & JS to create a bootstrap mega menu. You need jQuery plugin to work in all browsers.

CSS Code for Bootstrap Mega Menu Drop Down

.w3_megamenu .dropdown a,

.w3_megamenu .dropdown-menu  a {

	color:#656565;

}

.w3_megamenu .dropdown-menu > li > a {

	padding:6px 15px;

}

.w3_megamenu .navbar-nav > li > .dropdown-menu {

	margin-top:1px;

}

.w3_megamenu i {

	color:#BFBFBF

}

.w3_megamenu .dropdown-menu {

	box-shadow:none;

	border:1px solid #efefef;

	padding:0;

}

.w3_megamenu .form-control {

	margin-top:10px;

	border:1px solid #efefef;

}

.w3_megamenu .btn {

	margin:10px 0 20px

}

.w3_megamenu video {

	max-width: 100%;

	height: auto;

}

.w3_megamenu iframe,

.w3_megamenu embed,

.w3_megamenu object {

	max-width: 100%;

}

.w3_megamenu .google-map {

	width:100%;

	border:1px solid rgba(255, 255, 255, 0.5);

	min-height:200px;

}

.w3_megamenu div.google-map {

	background:rgba(255, 255, 255, 0.5);

	background: #ffffff;

	height: 200px;

	margin: 0 0 0px 0;

	width: 100%;

}

#googlemaps img{

    max-width:none;

}

.w3_megamenu .dropdown-menu .withoutdesc{

	margin-top:0;

	padding:15px 20px;

    display: block;

    text-align: left;

    text-transform: none;

    width: 100%;

}

.w3_megamenu a:hover {

	text-decoration:none

}

.w3_megamenu .dropdown-menu .withoutdesc ul li {

	padding:3px 10px;

}

.w3_megamenu .dropdown-menu .withoutdesc ul li:hover,

.w3_megamenu .dropdown-menu .withoutdesc ul li:focus{

	color:#262626;

	text-decoration:none;

	background-color:#f5f5f5 !important

}

.w3_megamenu .dropdown-menu .withoutdesc li:last-child {

	border-bottom:0 solid #fff;

}

.w3_megamenu .w3_megamenu-content.withdesc a:after {

    color: #CFCFCF;

    content: attr(data-description);

    display: block;

    font-size: 11px;

    font-weight: 400;

    line-height: 0;

    margin: 10px 0 15px;

    text-transform: uppercase;

}

.w3_megamenu .dropdown-submenu{

	position:relative;

}

.w3_megamenu .dropdown-submenu>.dropdown-menu{

	top:0;

	left:100%;

	margin-top:0;

	margin-left:-1px;

	-webkit-border-radius:0 6px 6px 6px;

	-moz-border-radius:0 6px 6px 6px;

	border-radius:0 6px 6px 6px;

}

.w3_megamenu .dropdown-submenu:hover>.dropdown-menu{

	display:block;

}
  
 
.w3_megamenu .dropdown-submenu>a:after{

	display:block;

	content:" ";

	float:right;

	width:0;

	height:0;

	border-color:transparent;

	border-style:solid;

	border-width:5px 0 5px 5px;

	border-left-color:#cccccc;

	margin-top:5px;

	margin-right:-10px;

}

.w3_megamenu .dropdown-submenu:hover>a:after{

	border-left-color:#ffffff;

}

.w3_megamenu .dropdown-submenu.pull-left{

	float:none;

}

.w3_megamenu .dropdown-submenu.pull-left>.dropdown-menu{

	left:-100%;

	margin-left:10px;

	-webkit-border-radius:6px 0 6px 6px;

	-moz-border-radius:6px 0 6px 6px;

	border-radius:6px 0 6px 6px;

}

.w3_megamenu p {

    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

    font-size: 13px;

	color:#656565;

}

.w3_megamenu .nav,

.w3_megamenu .collapse,

.w3_megamenu .dropup,

.w3_megamenu .dropdown {

	position: static;

}

.w3_megamenu .half {

    width: 50%;

	left: auto !important;

    right: auto !important;

}

.w3_megamenu .container {

	position: relative;

}

.w3_megamenu .dropdown-menu {

	left: auto;

}

.w3_megamenu .nav.navbar-right .dropdown-menu {

	left: auto;

	right: 0;

}

.w3_megamenu .w3_megamenu-content {

	padding: 15px 25px;

	background:#fafafa;

}

.w3_megamenu .dropdown.w3_megamenu-fw .dropdown-menu {

	left: 0;

	right: 0;

}

.w3_megamenu .title {

	font-size:13px;

	font-weight:bold;

	margin-top:15px;

	text-transform:uppercase;

	border-bottom:1px solid #efefef;

	padding-bottom:10px;

}

.w3_megamenu ul {

	list-style:none;

	padding-left:0px;

}

The above css code is for mega dropdown content

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome! Thanks!