Responsive Bootstrap Mega Menu with Contact Form, Video, Google Map etc
Last modified on by
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!
Hj Karthileyan. I’m come from Viet Nam. Why I can’t download script for subscribed user 19 hours ago >.<
Hj Karthileyan, I can’t download too…
this is worst tutorial
Mr. Karthikeyan your source code files are fake didnt work…Iam not happy….dont fake users once again……
Hi.. May I know which demo is not working.. I am ready to help you..
Thanks
your rss subscriptions are also not maintained upto date…dont use this site
over 24 hours waiting for subscription to recognize my email so I can access the script….still doesn’t work! Lowsy! What do I have to do to get the script Mr. K?
script is not working
You should run it to you localhost, mine after downloading works awesome. Thank you.
New subscribers email data will be updated every 10 hours!! friend waiting for this ten hours since last 3 days but its still not elapsed.
Hi Vijay,
Sorry for the inconvenience caused.
Please try it now. Just now I have updated the database
Thanks
Can i use the above code in my commercial web site?
Hi,
Yes Joe.. You can 🙂
I subscribed yesterday and I still haven’t been able to get in.
i’m not able to download it
i subscribed but there occurs an error (Email does not exist in our database. Please use below form to subscribe)
Thank you, I don’t speak english. T_T
real google map?
Hi Karthik
I have subscribed and almost 1 day over still database is not updated please help in downloading this source code.
Thanks,
Mohammed Farooq
Hi Mohammed,
Sorry for being late. Please download it now. I have updated the subscribers database now.
Thanks
Thank you very much 🙂
Hi Karthik
I have subscribed and almost 1 day over, but still database is not updated please help in downloading this source code.
Thanks, FreeAcknowledge
Hi Karthik
I have subscribed. Please help in downloading this source code.
Thanks,
Indrajeet Bhattacharya
Hello, I subscribed and its been more than 10hrs and I have not received the code yet
Do update your database please
Works fine. Thanks!
How to fix menubar at the top so it remains at top while scrolling?
Hi Swiden,
Place the tag before and add the class “navbar-fixed-top” in tag like this
Thanks