"mega menu slider bootstrap navbar navigation menu"
Bootstrap 3.3.0 Snippet by MTaqi

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="http://mogulsdemo.com/html/pride-home/css/font-awesome.css"> <div class="jain_container"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container1 container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <i class="icon-menu"></i> Menu </button> <a class="navbar-brand" href="#"> <img src="http://mogulsdemo.com/html/pride-home/images/logo.png" /></a> </div> <div class="col-md-8"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="col-md-12"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">FIND YORU HOTEL <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-4"> <ul> <li class="dropdown-header">Features</li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Carousel Control</a></li> <li><a href="#">Left & Right Navigation</a></li> <li><a href="#">Four Columns Grid</a></li> <!-- <li class="divider"></li> <li class="dropdown-header">Fonts</li> <li><a href="#">Glyphicon</a></li> <li><a href="#">Google Fonts</a></li> --> </ul> </li> <li class="col-sm-4"> <ul> <li class="dropdown-header">Plus</li> <li><a href="#">Navbar Inverse</a></li> <li><a href="#">Pull Right Elements</a></li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> </ul> </li> <li class="col-sm-4"> <ul> <li class="dropdown-header">Much more</li> <li><a href="#">Easy to Customize</a></li> <li><a href="#">Calls to action</a></li> <li><a href="#">Custom Fonts</a></li> <li><a href="#">Slide down on Hover</a></li> </ul> </li> </ul> </li> <li><a href="#">SPECIAL OFFERS</a></li><li> <a href="#">PLAN YOUR EVENTS</a></li><li> <a href="#">OUR BRANDS</a></li> <li><a href="#">LOYALTY</a></li> <li> <a href="#">CONTACT US</a> </li> </ul> </div> <div class="col-md-12"> <form class="form-horizontal form-horizontal_x"> <div class="col-md-12"> <div class="form-group"> <div class="col-sm-4"> <select name="hotel" id="hotel" required="" class="form-control" onchange="changeFormaction2(this.value);"> <option value="" selected="">Select Hotel</option> <option value="67961">Pride Plaza Hotel Ahmedabad</option> <option value="67964">The Pride Hotel Bengaluru</option> <option value="29191">The Pride Hotel Nagpur</option> <option value="67963">The Pride Hotel Chennai</option> <option value="29190">The Pride Hotel, Pune</option> <option value="67962">Pride Plaza Hotel Kolkata</option> <option value="67580">Pride Plaza Hotel Delhi</option> <option value="8">Pride Amber Vilas Jaipur</option> <option value="65728">Pride Surya Mountain Resort Mcleodganj</option> <option value="60533">Pride Sun Village Resort SPA,Goa</option> <option value="138227">The Pride Biznotel,Vadodara</option> </select> <!-- <input type="text" class="form-control" id="email" placeholder="Enter email"> --> </div> <div class="col-sm-3"> <input type="text" class="form-control" id="pwd" placeholder="Check In"> </div> <div class="col-sm-3"> <input type="text" class="form-control" id="pwd" placeholder="Check Out"> </div> <div class="col-sm-2"> <button type="submit" class="btn btn-default">Book Now</button> </div> </div> </div> </form> </div> </div> </div> <div class="col-md-2 medias"> <ul> <li> <a href=""> <i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li> <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li> <a href=""> <i class="fa fa-google-plus" aria-hidden="true"></i></a></li> <li> <a href=""> <i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li> </ul> <div class="classus"> <p> Call us +91 22 39178077</p> </div> <div class="why_bookonline"> <p> Why Bookonline?</p> </div> </div> </div> </nav> <div class="banner_home"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <!-- <li data-target="#myCarousel" data-slide-to="3"></li> --> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://mogulsdemo.com/html/pride-home/images/banner/1.jpg" alt="pride Hotel banner"/> <div class="carousel-caption"> <div class="tagline"> <h3>never just stay <hr/> <span>stay inspired </span> </h3> <div class="new_years"> <div class="new_years_inner"> <h4> New Year Offer</h4> <a href=""> Grab it now >></a> </div> </div> </div> </div> </div> <div class="item"> <img src="http://mogulsdemo.com/html/pride-home/images/banner/1.jpg" alt="pride Hotel banner"/> <div class="carousel-caption"> <div class="tagline"> <h3>never just stay <hr/> <span>stay inspired </span> </h3> <div class="new_years"> <div class="new_years_inner"> <h4> New Year Offer</h4> <a href=""> Grab it now >></a> </div> </div> </div> </div> </div> <div class="item"> <img src="http://mogulsdemo.com/html/pride-home/images/banner/1.jpg" alt="pride Hotel banner"/> <div class="carousel-caption"> <div class="tagline"> <h3>never just stay <hr/> <span>stay inspired </span> </h3> <div class="new_years"> <div class="new_years_inner"> <h4> New Year Offer</h4> <a href=""> Grab it now >></a> </div> </div> </div> </div> </div> </div> <!-- Left and right controls --> <!-- <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> --> </div> </div> </div>
body{ } @font-face { font-family: RadikalW01_Black_bold; src: url('../fonts/radikal_font_family/RadikalW01-Bold.ttf'); src: url('../fonts/radikal_font_family/RadikalW01-Bold.eot'); src: url('../fonts/radikal_font_family/RadikalW01-Bold.woff'); font-weight:bold; } @font-face { font-family: RadikalW01_thin; src: url('../fonts/radikal_font_family/RadikalW01-Light.ttf'); src: url('../fonts/radikal_font_family/RadikalW01-Light.eot'); src: url('../fonts/radikal_font_family/RadikalW01-Light.woff'); font-weight:bold; } @font-face { font-family: RadikalW01-Medium; src: url('../fonts/radikal_font_family/RadikalW01-Medium.ttf'); } @font-face { font-family: RadikalW01-Light; src: url('../fonts/radikal_font_family/RadikalW01-Light.ttf'); } @font-face { font-family: RadikalW01-Bold; src: url('../fonts/radikal_font_family/RadikalW01-Bold.ttf'); } @font-face { font-family: CenturyGothic-bold; src: url('../fonts/radikal_font_family/CenturyGothic-bold.ttf'); } @font-face { font-family:GOTHICB; src: url('../fonts/radikal_font_family/GOTHICB.TTF'); } @font-face { font-family:OPENSANS-REGULAR; src: url('../fonts/radikal_font_family/OPENSANS-REGULAR.TTF'); } @font-face { font-family:OPENSANS-SEMIBOLD; src: url('../fonts/radikal_font_family/OPENSANS-SEMIBOLD.TTF'); } .clear{ clear: both;} .jain_container{ margin:0px; padding:0px;} .jain_container .medias{margin-top: 15px;} .jain_container .medias ul{ padding:0px; margin:0px; } .jain_container .medias ul li{ display:inline; padding:7px 0px;} /* .jain_container .medias i { font-size: 18px;} */ .jain_container .navbar-brand{ height:inherit;} .jain_container .form-control{border-radius: 0px;border: 2px solid #adadad;} .jain_container .form-horizontal_x{ margin-top: 10px; } .form-horizontal_x .col-sm-4 { padding: 3px;} .form-horizontal_x .col-sm-3 { padding: 3px;} .form-horizontal_x .col-sm-2 { padding: 3px;} .jain_container .navbar-default{position: absolute; top: 20px; background-color: rgba(255, 255, 255, 0.72);} .jain_container .nav>li>a{padding: 15px 10px;color:#4c1f1e;font-family: RadikalW01_Black_bold;} .jain_container .btn-default { color: #fff; background-color: #ff523f; border-color: #ff523f; border-radius: 0px; text-transform: uppercase; font-size: 16px; } .jain_container .navbar-nav{ margin-top: 12px;} .jain_container .btn-default:hover{ background:#000; border-color:#000;} .medias ul li a { height: 30px; width: 30px; border: 1px solid #fff; line-height: 30px; background: #4c1f1e; border-radius: 50%; display: inline-block; text-align: center; color: #fff; font-size: 12px; } .classus p{color:#4c1f1e;padding-top: 10px;} .why_bookonline p{color:#4c1f1e; font-family: RadikalW01-Medium; font-size:18px;} .medias ul li a:hover { background: #000;} .jain_container .carousel-caption{ top: 38%;} .jain_container .tagline h3 {font-family: RadikalW01-Light;font-size: 42px;text-transform: uppercase;text-shadow: 0px 0px 2px #c29c78;} .jain_container .tagline h3 span{ font-family: RadikalW01-Bold; font-size:60px; letter-spacing:3px;} .new_years { border: 1px solid #fff; width: 38%; margin: auto; padding: 10px; } .new_years_inner{background: rgba(255, 82, 63, 0.9);padding: 14px 0px;} .new_years_inner h4 {font-size: 22px;font-family: RadikalW01-Bold;letter-spacing: 2px;text-transform: uppercase;} .new_years_inner a { color: #fff; letter-spacing: 2px; text-transform: uppercase; font-family: RadikalW01-Bold; text-decoration: none; } .tagline hr{ width:60%; border-top: 3px solid #eee;} .carousel-control.left { background: transparent; } .carousel-control.right{ background: transparent; } .carousel-control{ width:inherit;} .banner_hotels_all h1{font-size: 20px;font-family: RadikalW01-Bold;color:#ff523f;text-transform: uppercase;letter-spacing: 4px;padding-bottom: 30px;} #hotel_alls{ padding:50px 0px;} .banner_hotels_all .col-md-4{padding:0px;} .banner_hotels_all .col-md-8{padding:0px;} .banner_hotels_all .hotels_abouts{border:4px solid #f5d1a9;padding: 20px 30px;} .hotels_abouts h2 { font-family:GOTHICB; color:#4c1f1e; font-size: 22px; text-transform: uppercase; line-height: 25px;} a.hotels_ex { display: block; width: 100%; background: #4c1f1e; text-align: center; padding: 6px 0px; text-transform: uppercase; color: #fff; letter-spacing: 1px; margin-bottom: 15px; text-decoration: none; margin-top: 20px; } a.booking_qx { display: block; width: 100%; background: #ff523f; text-align: center; padding: 6px 0px; text-transform: uppercase; color: #fff; letter-spacing: 1px; text-decoration: none; } .hotels_abouts p { color: #818181; font-size: 12px; } .hotels_loc { background: rgba(76, 31, 30, 0.71); position: absolute; z-index: 999; top: 0px; left: 10%; padding: 10px 20px; } .hotels_loc span { color: #4c1f1e; background: #f5d1a9; font-size: 18px; padding: 5px; } .hotels_loc h3 { color: #fff; margin: 10px 0; } .hotels_loc p { color: #fff; } #myCarousel_hotels .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev{ margin-left: -50px; font-size: 50px; color: #4c1f1e;} #myCarousel_hotels .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next{ margin-right: -50px; font-size: 50px; color: #4c1f1e;} #myCarousel_hotels .carousel-control{opacity: .9;} .banner_hotels_all_abouts p{font-family: RadikalW01-Medium;line-height: 30px;text-align: center;} .banner_hotels_all_abouts p span{ color:#ff523f;} .all_offers_in .col-md-4{ padding:5px;} .offers_off { margin-top: -117px; display: -webkit-box; background: rgba(120, 64, 61, 0.71); width: 100%; position: relative; padding: 15px 0px; } .offers_off h4{ font-family: RadikalW01_Black_bold; color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 24px; } .offers_off h4 span{ display: block; font-family: RadikalW01_thin; text-transform: uppercase; color: #fff; font-size: 38px; } .offers_off p{ font-family: RadikalW01_thin; color: #fff; font-size: 18px; padding-top: 6px; } a.offers_link{ font-family: RadikalW01_Black_bold; color: #ff523f; font-size: 20px; text-decoration: none; } #offers_out{ padding-top:40px;} #myCarousel_wedding .carousel-indicators { position: absolute; bottom: 70px; right: 0%; z-index: 15; left: inherit; width: 22%; } .wedding_slide_tag { position: absolute; z-index: 999; top: 24%; left: 10%; color: #fff; } .wedding_slide_tag h3 { font-family: RadikalW01_Black_bold; display: table-caption; text-transform: uppercase; font-size: 50px; } .wedding_slide_tag h3 span{ font-family: RadikalW01_thin; } .wedding_forms { display: block; z-index: 999; position: relative; width: 50%; left: 50%; margin-top: -4%; } .wedding_forms .form-control{ border: none;} .wedd_btn{ width:100%; font-family: RadikalW01_Black_bold; letter-spacing: 1px; padding: 10px 0px;} .wedd_sel{width:100%;color: #4c1f1e;font-family: RadikalW01_Black_bold;height: 44px; text-transform: uppercase; letter-spacing: 1px;} #footersl{background: url(../images/footers.png);padding: 150px 0px 50px 0px;background-repeat: no-repeat;background-position-y: center;border-bottom: 8px solid #4c1f1e;} .site_menus ul { margin: 0px; padding: 0px; float: right; width: 63%; } .site_menus ul li { display: inline; padding: 4px; } .site_menus a { color: #000; line-height: 30px; text-decoration: none; } .site_menus { padding: 10px 0px; } .abouts_footers p{font-family:OPENSANS-REGULAR;color:#696969;padding: 10px 0px;line-height: 30px;font-size: 14px;} .hotelslog img{margin-bottom: 30px;} .barands_menus { text-align: center; } .barands_menus ul { margin-bottom: 40px; padding: 0px; } .barands_menus ul li { display: inline; padding: 8px; } .barands_menus a { color: #4c1f1e; font-weight: 600; font-family: OPENSANS-REGULAR; text-decoration: none; } .footers_adds { border-right: 1px solid #000; } .footers_adds h3{ font-family: OPENSANS-SEMIBOLD; font-size: 20px; color: #000; } .footers_adds p{ font-family: OPENSANS-REGULAR; color: #696969; } .footers_adds span { display: block; } .footers_media{ text-align: right; } .footers_media h3{ text-align: left; padding-left: 55%; font-family: OPENSANS-SEMIBOLD; font-size: 20px; color: #000; } .footers_media ul{} .footers_media ul li{ display: inline-block; padding: 0px 10px; } .footers_media ul li a{ display: inline-block; border: 1px solid #000; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 20px; } .footers_copyright { text-align: center; padding: 30px 0px 0px 0px; } .footers_copyright p{ font-size: 16px; font-family: OPENSANS-REGULAR; font-weight: bold; } .footers_copyright p a { color: #000; text-decoration: none; } .footers_media ul li a i { font-size: 18px; color: #000; } .hotelslog .col-md-4{ padding:0px;} @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; } .mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; padding: 10px 5px; border-bottom: 1px solid #ca7167; color: #4c1f1e; font-family: RadikalW01_Black_bold; text-transform: uppercase; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; } .mega-dropdown-menu .dropdown-header { font-size: 18px; color: #ff3546; padding: 5px 60px 5px 5px; line-height: 30px; } .jain_container .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{ color: #f45541; background-color: rgba(231, 231, 231, 0);}

Related: See More


Questions / Comments: