"Mega menu with carousel for Stores"
Bootstrap 3.1.0 Snippet by malik022

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">MegaMenu</a> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <li> <img src="http://i.imgur.com/NqbarTs.png" height="32" width="32" style="margin-top:8px;margin-left: 15px;"> </li> <li> <a href="/home"> <img src="http://www.minecraftopia.com/images/blocks/crafting_table.png" width="20" height="20"><span style="font-size: 14pt;"> <span style="color: rgb(0, 0, 0); font-family: 'Arial Black';">HOME</span></span> </a> </li> <li><a href="/forum"><span style="color: rgb(0, 0, 0); font-family: 'Arial Black'; font-size: 14pt;"><img src="http://hydra-media.cursecdn.com/minecraft.gamepedia.com/b/ba/Book_and_Quill.png" width="20" height="20"> FORUMS</span></a> </li> <li><a href="/donate"><span style="color: rgb(0, 0, 0); font-family: 'Arial Black'; font-size: 14pt;"><img src="http://media-mcw.cursecdn.com/d/d0/Diamond_(Block).png" width="20" height="20"> DONATE</span></a> </li> <li><a href="/vote"><span style="color: rgb(0, 0, 0); font-family: 'Arial Black'; font-size: 14pt;"><img src="http://hydra-media.cursecdn.com/minecraft.gamepedia.com/9/93/Bottle_o'_Enchanting.png" width="20" height="20"> VOTE</span></a> </li> <li><a href="/members"><span style="color: rgb(0, 0, 0); font-family: 'Arial Black'; font-size: 14pt;"><img src="http://hydra-media.cursecdn.com/minecraft.gamepedia.com/8/81/Waterbucket.PNG" width="20" height="20"> MEMBERS</span></a> </li> <li><a href="staff"><span style="color: rgb(0, 0, 0); font-family: 'Arial Black'; font-size: 14pt;"><img src="http://media-mcw.cursecdn.com/a/a8/Redstone_Lamp_(Active).png" width="20" height="20"> STAFF</span></a> </li> </li> </ul> </div><!-- /.nav-collapse --> </nav> </div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; background:#f0f0f0; } .navbar-nav>li>.dropdown-menu { margin-top:20px; border-top-left-radius:4px; border-top-right-radius:4px; } .navbar-default .navbar-nav>li>a { width:200px; font-weight:bold; } .mega-dropdown { position: static !important; width:100%; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } .mega-dropdown-menu:before { content: ""; border-bottom: 15px solid #fff; border-right: 17px solid transparent; border-left: 17px solid transparent; position: absolute; top: -15px; left: 285px; z-index: 10; } .mega-dropdown-menu:after { content: ""; border-bottom: 17px solid #ccc; border-right: 19px solid transparent; border-left: 19px solid transparent; position: absolute; top: -17px; left: 283px; z-index: 8; } .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: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #999; white-space: normal; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; color: #444; background-color: #f5f5f5; } .mega-dropdown-menu .dropdown-header { color: #428bca; font-size: 18px; font-weight:bold; } .mega-dropdown-menu form { margin:3px 20px; } .mega-dropdown-menu .form-group { margin-bottom: 3px; }

Related: See More


Questions / Comments: