twitter-bootstrap


how can create bootstrap navbar like Avast site


i want navbar like this how can i do it
this is li dropdown
<li class="dropdown>
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="javascript:void(0)">
test
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
and dropdown-menu class i want it width 100%
Try this code and customize for your needs,
-HTML
<div class="container">
<nav class="navbar navbar-inverse">
<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="#">My Store</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
Men <span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Men Collection</li>
<div id="menCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1">
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2">
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3">
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#menCollection" 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="#menCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li>View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li>Auto Carousel</li>
<li>Carousel Control</li>
<li>Left & Right Navigation</li>
<li>Four Columns Grid</li>
<li class="divider"></li>
<li class="dropdown-header">Fonts</li>
<li>Glyphicon</li>
<li>Google Fonts</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Plus</li>
<li>Navbar Inverse</li>
<li>Pull Right Elements</li>
<li>Coloured Headers</li>
<li>Primary Buttons & Default</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Much more</li>
<li>Easy to Customize</li>
<li>Calls to action</li>
<li>Custom Fonts</li>
<li>Slide down on Hover</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
Women <span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li>Auto Carousel</li>
<li>Carousel Control</li>
<li>Left & Right Navigation</li>
<li>Four Columns Grid</li>
<li class="divider"></li>
<li class="dropdown-header">Fonts</li>
<li>Glyphicon</li>
<li>Google Fonts</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Plus</li>
<li>Navbar Inverse</li>
<li>Pull Right Elements</li>
<li>Coloured Headers</li>
<li>Primary Buttons & Default</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Much more</li>
<li>Easy to Customize</li>
<li>Calls to action</li>
<li>Custom Fonts</li>
<li>Slide down on Hover</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Women Collection</li>
<div id="womenCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1">
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2">
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3">
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#womenCollection" 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="#womenCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li>View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></li>
</ul>
</li>
</ul>
</li>
<li>Store locator</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
My account <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>My cart (0) items</li>
</ul>
</div><!-- /.nav-collapse -->
-JS
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
); });
-CSS
#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;color: #222;
padding: 3px 5px;}.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;}.carousel-control {width: 30px;height: 30px;
top: -35px;}.left.carousel-control {
right: 30px;left: inherit;}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right {
font-size: 12px; background-color: #fff; line-height: 30px; text-shadow: none; color: #333; border: 1px solid #ddd;}

Related Links

php if no image make bootstrap colulmn col-md-12
Collapse horizontal Bootstrap 3 navbar to a stacked one
Bootstrap carousel: how to lower the bottom circle indicators?
Bootstrap navbars collapse
Bootstrap: Remove form field border
Convert a Bootstrap site to an Orchard module
grunt-contrib-sass not compiling css file
Disable bootstrap for small resolution
Dynamic Bootstrap website using Joomla's BackOffice
Navbar dropdown not working on mobile devices
Inline form elements within non-inline form in Bootstrap 3?
Google Charts overflow with Bootstrap
load local bootstrap css and js if load fail from remote
Google maps API v3 controls missing in Bootstrap 3.0
twitter bootstrap form-control how to inline
Bootstrap modal inside iframe wont animate into viewport of iframe

Categories

HOME
airflow
kendo-ui-angular2
teradata
primefaces
cxf
spss
thermal-printer
aggregation-framework
aggregate-functions
collision-detection
pip
theory
gcloud
comma
javascript-debugger
popup
samba
filehelpers
geography
sonarlint
jq
dev-c++
multipart
klipfolio
pushbullet
struts
dynamic-memory-allocation
sphinx4
paper-trail-gem
vtd-xml
textview
kubectl
visual-prolog
eclipse-jdt
offset
rythm
client-server
dotnetnuke-module
mockserver
lfe
rbac
glide-image-library
electron-packager
ape-phylo
compiler-warnings
weld
standard-error
runtime-permissions
dotnet-cli
activesupport
seyren
xamarin-test-cloud
liferay-ide
critical-section
blitz3d
qudpsocket
scikit-image
sbt-proguard
mod
wonderware
dynamics-nav
windows-phone-8-emulator
properties-file
textblob
eula
esb-toolkit-2.1
genome
conkeror
nsurlrequest
breeze-sharp
worklight-appcenter
agent-based-modeling
javacompiler
disabled-control
switchpreference
rails-migrations
code-smell
facebook-java-api
vbaccelerator
maven-javadoc-plugin
ardor3d
tlbimp
caroufredsel
usersettings
system.transactions
microsoft-speech-platform
boost.build
algol
junit-rule
openafs
derived-class
nserror
scriptmanager
httppostedfilebase
session-hijacking
overlays
service-layer
quazip
cinder
datarelation
nstoolbar
jquery-attributes
silverlight-2.0
appointment
pixel-bender

Resources

Encrypt Message