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

Last modified on 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

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!

You May Also Like

26 Responses

  1. thanh tuyen says:

    Hj Karthileyan. I’m come from Viet Nam. Why I can’t download script for subscribed user 19 hours ago >.<

  2. Simon says:

    Hj Karthileyan, I can’t download too…

  3. teja says:

    this is worst tutorial

  4. teja says:

    Mr. Karthikeyan your source code files are fake didnt work…Iam not happy….dont fake users once again……

  5. teja says:

    your rss subscriptions are also not maintained upto date…dont use this site

  6. BadFunctionality says:

    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?

  7. Nitin Ahuja says:

    script is not working

  8. Ron says:

    You should run it to you localhost, mine after downloading works awesome. Thank you.

  9. Vijay Kumar Singh says:

    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.

  10. Joe Dora says:

    Can i use the above code in my commercial web site?

  11. Brandon says:

    I subscribed yesterday and I still haven’t been able to get in.

  12. mkanel says:

    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)

  13. 야스[boss] says:

    Thank you, I don’t speak english. T_T

  14. Elena Calvillo says:

    real google map?

  15. mohammed farooq says:

    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

  16. FreeAcknowledge says:

    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

  17. Indrajeet Bhattacharya says:

    Hi Karthik

    I have subscribed. Please help in downloading this source code.

    Thanks,
    Indrajeet Bhattacharya

  18. Frank Komu says:

    Hello, I subscribed and its been more than 10hrs and I have not received the code yet

  19. Frank Komu says:

    Do update your database please

  20. Swinden says:

    Works fine. Thanks!
    How to fix menubar at the top so it remains at top while scrolling?

Leave a Reply

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