Sub menu on hover over navbar link in bootstrap - javascript

I want to to implement a feature in my bootstrap project like whenever someone will hover over my one of navbar links, it will display a detailed menu vertically like a menu in image below
I know how to make dropdown on hover over navbar link, but how can i populate this type of sub menu on hover.
Is already there any tutorial or example exists then do share with me.
If not then share idea!
Thanks!
Html
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<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>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>


I have tried this, You can use below code :
HTML :
<nav class="navbar navbar-default navbar-static">
<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>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large">
Some link
</li>
<li class="dropdown dropdown-large">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Sword of Truth</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Panda</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Sword of Truths</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Theme/Character</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li class="col-sm-6">
<ul>
<li class="dropdown-header">by brand</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Some link
</li>
<li class="dropdown dropdown-large">
Some link
</li>
<li class="dropdown dropdown-large">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Sword of Truths</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Theme/Character</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">by brand</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Sword of Truths</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Theme/Character</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">by brand</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</nav>
CSS :
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body{
font-family: 'Lato', sans-serif;
font-weight:300;
}
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large > li > ul > li {
list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight:300;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
#media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0 ;
margin-right: 0 ;
}
.dropdown-menu-large > li {
margin-bottom: 30px;
}
.dropdown-menu-large > li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}
Fiddle is here Click here


<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
#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;
}
</style>
<div class="container">
Toggle navigation
My Store
<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 -->
<script>
$(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');
}
);
});
</script>
for more visite enter link description here


This may be an option, you just need to adjust the margin and padding to your needs.
Hope it helps. ;)
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.dropdown-menu-fixed {
margin: 0;
padding: 0;
height: auto;
background-color: #fff;
}
.dropdown-menu-fixed > ul {
position: relative;
margin: 1rem 0 0;
padding: 0 0 1rem 0;
min-height: 1px;
float: none;
width: 100%;
}
.dropdown-menu-fixed > ul li {
padding: 3px 20px;
}
.dropdown-menu-fixed a {
display: block;
text-decoration: none;
}
.dropdown-header {
font-weight: bold;
font-size: 13px;
}
#media (min-width: 768px) {
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.dropdown-menu-fixed {
position: fixed;
top: 50px;
width: 100%;
background-color: #fff;
}
.dropdown-menu-fixed > ul {
position: relative;
margin: 1rem 0 0;
padding: 0 0 1rem 60px;
min-height: 1px;
float: left;
width: 33.33333333%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Personal
<span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-fixed">
<ul class="list-unstyled">
<li class="dropdown-header">Dropdown header</li>
<li><a class="small" href="#">Action</a></li>
<li><a class="small" href="#">Another action</a></li>
</ul>
<ul class="list-unstyled">
<li class="dropdown-header">Dropdown header</li>
<li><a class="small" href="#">Action</a></li>
<li><a class="small" href="#">Another action</a></li>
</ul>
<ul class="list-unstyled">
<li class="dropdown-header">Dropdown header</li>
<li><a class="small" href="#">Action</a></li>
<li><a class="small" href="#">Another action</a></li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>


try this, it should work for desktop as well as mobile views:
$(document).ready(function(){
$(".dropdown").hover(
function () {
if (!$($(this).parents()[3]).find('.navbar-toggle').is(":visible")) {
$(this).find('.dropdown-toggle').trigger('click');
}
},
function () {
if (!$($(this).parents()[3]).find('.navbar-toggle').is(":visible")) {
$(this).find('.dropdown-toggle').trigger('click');
}
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<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>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

Related

Setting navbar items to active onclick

I am having a lot of trouble making navbar item to active on click.
I have included this navbar file to different pages but when i click on an item it doesn't change its class or its styling.
I have tried many techniques from using jquery onclick functions to add class active on click to changing changing css onclick but nothing is working. Any possible help will be highly appreciated . Navbar code is below :
<div class="header" id="home">
<div class="content white agile-info">
<nav class="navbar navbar-default " role="navigation">
<div class="container">
<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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">
<h1><span class="fa fa-signal" aria-hidden="true"></span> Soft <label>Hr Agency</label></h1>
</a>
</div>
<!--/.navbar-header-->
<div class="nav navbar-nav mr-auto" id="bs-example-navbar-collapse-1" style="margin-right: -5%">
<nav class="link-effect-2" id="link-effect-2">
<ul class="nav navbar-nav navbar-right" >
<li class="active">Home</li>
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Services 2</li>
<li class="divider"></li>
<li>Services 3</li>
<li class="divider"></li>
<li>Codes</li>
<li class="divider"></li>
<li>Icons</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Jobs<b class="caret"></b>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Walk-ins</li>
<li>Bpo Jobs</li>
<li>Teaching Jobs</li>
<li>Diploma Jobs</li>
<li>Tech Support</li>
<li>Finance Jobs</li>
<li>Part time Jobs</li>
<li>Health Care</li>
<li>Hospitality</li>
<li>Internships</li>
<li>Research Jobs</li>
<li>Defence Jobs</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Recruiter Updates</li>
<li>Upload Resume</li>
<li>Shortcodes</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Events</li>
<li>Professionals</li>
<li>Contact</li>
<li >
<a style="margin-top: -5%" href="login.php">
<button type="submit" onclick="location.href='login.php';" style="float: right;background: #23B684;width: 100%;color: white" class="btn btn-block">
<i class="fa fa-user" aria-hidden="true"> </i> Login</button></a></li>
</ul>
</nav>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>

Normally this should work using JQuery:
$('.nav .navbar-nav li a').click(function(){
$(this).addClass("active"); });
you have also to check what the active class is changing.

I think what you mean is for every <li> item that you click, an active class name would be added to its list of class names. If I'm right in what I'm thinking, here's my suggestion:
HTML
<div class="header" id="home">
<div class="content white agile-info">
<nav class="navbar navbar-default " role="navigation">
<div class="container">
<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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">
<h1><span class="fa fa-signal" aria-hidden="true"></span> Soft <label>Hr Agency</label></h1>
</a>
</div>
<!--/.navbar-header-->
<div class="nav navbar-nav mr-auto" id="bs-example-navbar-collapse-1" style="margin-right: -5%">
<nav class="link-effect-2" id="link-effect-2">
<ul class="nav navbar-nav navbar-right main-ul" >
<li class="active">Home</li>
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Services 2</li>
<li class="divider"></li>
<li>Services 3</li>
<li class="divider"></li>
<li>Codes</li>
<li class="divider"></li>
<li>Icons</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Jobs<b class="caret"></b>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Walk-ins</li>
<li>Bpo Jobs</li>
<li>Teaching Jobs</li>
<li>Diploma Jobs</li>
<li>Tech Support</li>
<li>Finance Jobs</li>
<li>Part time Jobs</li>
<li>Health Care</li>
<li>Hospitality</li>
<li>Internships</li>
<li>Research Jobs</li>
<li>Defence Jobs</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Recruiter Updates</li>
<li>Upload Resume</li>
<li>Shortcodes</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Events</li>
<li>Professionals</li>
<li>Contact</li>
<li ><a style="margin-top: -5%" href="login.php"> <button type="submit" onclick="location.href='login.php';" style="float: right;background: #23B684;width: 100%;color: white" class="btn btn-block"> <i class="fa fa-user" aria-hidden="true"> </i> Login</button></a></li>
</ul>
</nav>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>
CSS
.active {
background: red;
}
JavaScript (JQuery)
$('.main-ul li').click(function(e) {
e.preventDefault();
$(this).addClass('active').siblings().removeClass('active');
})
I added a main-ul on the first <ul> so I can easily reference to it and its <li> items then I created .active in CSS. Now whenever you click on an <li> item, a red background is applied to it indicating that it has an active class name.

Bootstrap Nestable List-Group - JQuery Sortable

Hi can anyone help me with JQuery Sortable? I need to make this list sortable. I cannot get it to work right been able to drag the parent that is inside another parent. Do I have to make the handle the prev() element?
Here is the HTML
<ul class="list-group list-group-root well">
<li href="#item-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1
</li>
<ul class="list-group collapse" id="item-1">
<li href="#item-1-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
</li>
<ul class="list-group collapse" id="item-1-1">
<li href="#" class="list-group-item">Item 1.1.1</li>
<li href="#" class="list-group-item">Item 1.1.2</li>
<li href="#" class="list-group-item">Item 1.1.3</li>
</ul>
<li href="#item-1-2" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
</li>
<ul class="list-group collapse" id="item-1-2">
<li href="#" class="list-group-item">Item 1.2.1</li>
<li href="#" class="list-group-item">Item 1.2.2</li>
<li href="#" class="list-group-item">Item 1.2.3</li>
</ul>
<li href="#item-1-3" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.3
</li>
<ul class="list-group collapse" id="item-1-3">
<li href="#" class="list-group-item">Item 1.3.1</li>
<li href="#" class="list-group-item">Item 1.3.2</li>
<li href="#" class="list-group-item">Item 1.3.3</li>
</ul>
</ul>
</ul>
The CSS..
.list-group.list-group-root {
padding: 0;
overflow: hidden;
}
.list-group.list-group-root .list-group {
margin-bottom: 0;
}
.list-group.list-group-root .list-group-item {
border-radius: 0;
border-width: 1px 0 0 0;
}
.list-group.list-group-root > .list-group-item:first-child {
border-top-width: 0;
}
.list-group.list-group-root > .list-group > .list-group-item {
padding-left: 30px;
}
.list-group.list-group-root > .list-group > .list-group > .list-group-item {
padding-left: 45px;
}
.list-group-item .glyphicon {
margin-right: 5px;
}
https://jsfiddle.net/Lh2rzts6/

Answer update
From comment:
how do I make the children move with the parent if the parent is dragged?
You can use the sortstop event in order to move the children with the parent.
Old answer
I may suggest you to use html5sortable.
Add to each ul element the classes: sortable & js-connected and call sortable.
$('.list-group-item').on('click', function () {
$('.glyphicon', this)
.toggleClass('glyphicon-chevron-right')
.toggleClass('glyphicon-chevron-down');
});
//
// add the classes sortable & js-connected to each ul
//
$('.list-group').addClass('sortable js-connected');
//
// activate html5sortable
//
sortable('.sortable', {
connectWith: 'js-connected',
forcePlaceholderSize: true
});
//
// on sortstop handle the parents node....
//
document.querySelectorAll('.sortable').forEach(function (ele, idx) {
ele.addEventListener('sortstop', function (e) {
if(e.detail.item.querySelector('i') != null) { // if parent element (i.e.: UL) ....
$(e.detail.item).append($(e.detail.item.getAttribute('href')));
}
});
});
.list-group.list-group-root {
padding: 0;
overflow: hidden;
}
.list-group.list-group-root .list-group {
margin-bottom: 0;
}
.list-group.list-group-root .list-group-item {
border-radius: 0;
border-width: 1px 0 0 0;
}
.list-group.list-group-root > .list-group-item:first-child {
border-top-width: 0;
}
.list-group.list-group-root > .list-group > .list-group-item {
padding-left: 30px;
}
.list-group.list-group-root > .list-group > .list-group > .list-group-item {
padding-left: 45px;
}
.list-group-item .glyphicon {
margin-right: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/lukasoppermann/html5sortable/master/dist/html.sortable.min.js"></script>
<ul class="list-group list-group-root well">
<li href="#item-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1
</li>
<ul class="list-group collapse" id="item-1">
<li href="#item-1-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
</li>
<ul class="list-group collapse" id="item-1-1">
<li href="#" class="list-group-item">Item 1.1.1</li>
<li href="#" class="list-group-item">Item 1.1.2</li>
<li href="#" class="list-group-item">Item 1.1.3</li>
</ul>
<li href="#item-1-2" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
</li>
<ul class="list-group collapse" id="item-1-2">
<li href="#" class="list-group-item">Item 1.2.1</li>
<li href="#" class="list-group-item">Item 1.2.2</li>
<li href="#" class="list-group-item">Item 1.2.3</li>
</ul>
<li href="#item-1-3" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.3
</li>
<ul class="list-group collapse" id="item-1-3">
<li href="#" class="list-group-item">Item 1.3.1</li>
<li href="#" class="list-group-item">Item 1.3.2</li>
<li href="#" class="list-group-item">Item 1.3.3</li>
</ul>
</ul>
</ul>

Navbar brand logo issue

there is an issue my navbar-brand i put logo with img-responsive but it doesn't fit as below screen shot and code.
if i change the width and height then the responsive of image finish. and content overlap.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="index.php"><img src="logo.jpg" class="img-responsive" alt="Responsive image"></a>
</div>
</div>
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> ABOUT AIE <span class="caret"> </span> </a>
<ul class="dropdown-menu" >
<li class="size"> Home </li>
<li class="divider"> </li>
<li class="size"> Vision & Mission </li>
<li class="divider"> </li>
<li class="size"> History </li>
<li class="divider"> </li>
<li class="size"> Chairman's Message </li>
<li class="divider"> </li>
<li class="size"> Rector's Message </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> ADMISSIONS <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Intermediate </li>
<li class="divider"> </li>
<li class="size"> Undergaduate </li>
<li class="divider"> </li>
<li class="size"> Graduate </li>
<li class="divider"> </li>
<li class="size"> Diploma Programs </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> RESOURCES <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> QEC Vision & Mission
<li role="presentation" class="divider"> </li>
<li class="size"> QEC Programme Teams
<li role="presentation" class="divider"> </li>
<li class="size"> Library </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> SHORT COURSES <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> English Language Development Centre Short Courses (ELDC) </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Montessori </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> OTHER DEPARTMENTS <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Continuing Professional Development (CPD) </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Kids University </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Need Based Training </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Leadership & Management </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> CAMPUS VIEW <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> 3D Campus View </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> CONTACT US <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Location </li>
</ul>
</li>
</div>
</nav>
</div>
and the css file is this
body { padding-top: 40px; }
#media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
.navbar-default
{
background-color: #002E5F;
}
content overlap even i doesn't change the height and width

Here is your Answer
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.navbar-default
{
background-color: #002E5F;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="img-responsive" alt="Responsive image"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> ABOUT AIE <span class="caret"> </span> </a>
<ul class="dropdown-menu" >
<li class="size"> Home </li>
<li class="divider"> </li>
<li class="size"> Vision & Mission </li>
<li class="divider"> </li>
<li class="size"> History </li>
<li class="divider"> </li>
<li class="size"> Chairman's Message </li>
<li class="divider"> </li>
<li class="size"> Rector's Message </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> ADMISSIONS <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Intermediate </li>
<li class="divider"> </li>
<li class="size"> Undergaduate </li>
<li class="divider"> </li>
<li class="size"> Graduate </li>
<li class="divider"> </li>
<li class="size"> Diploma Programs </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> RESOURCES <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> QEC Vision & Mission
<li role="presentation" class="divider"> </li>
<li class="size"> QEC Programme Teams
<li role="presentation" class="divider"> </li>
<li class="size"> Library </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> SHORT COURSES <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> English Language Development Centre Short Courses (ELDC) </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Montessori </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> OTHER DEPARTMENTS <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Continuing Professional Development (CPD) </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Kids University </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Need Based Training </li>
<li role="presentation" class="divider"> </li>
<li class="size"> Leadership & Management </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> CAMPUS VIEW <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> 3D Campus View </li>
</ul>
</li>
<li class="dropdown" ><a class="dropdown-toggle" data-toggle="dropdown" href="#"> CONTACT US <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li class="size"> Location </li>
</ul>
</li>
</div>
</nav>
</div>
</body>
</html>

You need to write custom CSS for navbar-brand class. Just follow this.
.navbar{
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-bottom: 0;
height: auto;
}
.navbar-brand{
height: auto;
margin-left: 15px;/* add margin in left. Because padding is removed from left. */
padding: 5px 0; /* Remove padding from left and right. User need to click on logo not outside of logo. */
width: 200px;
}
#media (min-width: 768px){
.navbar-brand{
width: auto; /* You can change the width when you need. */
}
}

I belive that what you want can be acomplished with CSS.
.navbar-brand {
padding: 0px;
}
.navbar-brand img {
height: 100%;
width: auto;
}
Be careful, your markup seems a bit odd. Some tags are extra or missing.
Check out this fiddle for the result https://jsfiddle.net/L5r42dd6/12/

CSS Bootstrap - Align Navbar 'Icons' with edge of jumbotron

I am trying to align the selections in the navbar with the edges of the jumbotron, so that the rapidcodes logo aligns with the edge of the grey box in 'Newest Additions' and the 'login' button aligns with the right edge of the grey box.
See screenshot of current page:
Code:
td {
text-align: left;
vertical-align: central;
padding: 4px;
}
.products {
display: inline-block;
margin: 15px;
}
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>

Try packing your code inside the external div with the class of 'container'.
<div class="container"><!--Pack your code inside the container-->
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div><!--end container-->

Your content probably has a container .container. Also wrap your navbar with this.

Show notification counter with bootstrap

I want to implement a notification counter which rolls up to show incremented number.(Like the one google shows with google+ notifications) I can't get overflow:hidden to work for .notif-surround. Its child element's(the one with three numbers) height is larger and still it's visible. I want its appropriate portion to be visible. How do I do that?
jsfiddle demo
html
<div id="top_navbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/">Name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="span6 offset1">
<form class="navbar-form form-search">
<div class="input-append">
<input class="span4 search-query" type="text" placeholder="Search...">
<button type="submit" class="btn">Search</button>
</div>
</form>
</li>
<li class="dropdown">
Home <span class="notif-surround"><span class="badge badge-info notif-background" > </span><span id="num_notif">0<br/>1<br/>2</span></span><b class="caret"></b>
<ul class="dropdown-menu">
<li class="nav-header">Notifications</li>
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Messages</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<!-- <li><i class="icon-exclamation-sign icon-white"></i></li> -->
<li class="dropdown">
<img class="img-rounded img-profile inline" src="{{user['picture']['data']['url']}}" />
{{user['name']}} <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
css
.notif-background{
width:18px;
height:14px;
}
#num_notif{
position: relative;
float: right;
left: -38px;
color: #fff;
height:18px;
bottom:20px;
}
.notif-surround{
overflow:hidden;
}

Set display: inline-block on the .notif-surround span.
.notif-surround{
overflow:hidden;
display: inline-block;
}
The problem is that you can't set overflow hidden on an element which is set as display: inline, which is the default for a span, as you can't set its width and its height. Setting display: block or display: inline-block fixes this, with the first forcing a line break after itself, and the latter leaving the original flow of elements intact.

Categories