We Keep Coding

Bootstrap collapsed navbar not staying collapsed after clicking sub menu

In bootstrap, with the below code i am able to expand and collapse the 2 menus. But when i expands a menu and click on the sub menu, then the sub menus are not staying collapse..
When i changed this line from class="collapse list-unstyled " to class="collapse list-unstyled show" the menus are collapsed and not shrinking when i click on the next main menu...
<?php include('header.php'); ?>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<ul class="list-unstyled components top_admin">
</ul>
<ul class="list-unstyled components">
<li>
<a href="dashboard.php" data-toggle="collapse" aria-expanded="false" >
<i class="fa fa-tachometer" aria-hidden="true"></i>
<span>DASHBOARD </span>
</a>
</li>
<li>
<a href="#my_note1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fa fa-hand-o-up" aria-hidden="false"></i>
<span>My Notes1</span>
</a>
<ul class="collapse list-unstyled " id="my_note1">
<li>
<span class="small_menu">CN</span>
<a class="la_cls" href="page1.php">Create Note</a>
</li>
</ul>
</li>
<li>
<a href="#my_note2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fa fa-hand-o-up" aria-hidden="false"></i>
<span>My Notes2</span>
</a>
<ul class="collapse list-unstyled " id="my_note2">
<li>
<span class="small_menu">CN</span>
<a class="la_cls" href="page1.php">Create Note</a>
</li>
<li>
<span class="small_menu">SN</span>
<a class="la_cls" href="#">Search Notes</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
I need after clicking the sub menu the sub menus should me stayed collapsed util i click on the another main menu. Anyone please help me, what should i do to solve this problem. Thanks in advance..

<header role="banner" id="top" class="navbar navbar-static-top">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="animbrand">M-Panel</div>
</div>
<div class="collapse navbar-collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class=""><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-list-alt"></span> Offers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> All Offer Details</li>
<li class=""><span class="glyphicon glyphicon-pencil"></span> Create Offer ID</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-book"></span> Reports <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Click Report</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Live Report</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> This Month Revenue</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Last Month Revenue</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> News Reports</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-user"></span> Accounts <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> View Accounts</li>
<li class=""><span class="glyphicon glyphicon-pencil"></span> Add Account</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" >
<span></span>
<small>Welcome,</small> User <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-off"></i> Logout</li>
</ul>
</li>
</ul>
</div>
</div>

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/

bootstrap navbar toggle not working for mobile

I have a JSfiffle
https://jsfiddle.net/zuer7g75/1/
<ul class="dropdown-menu">
<li>
<a href="/camera-photo">
Camera & photo
</a>
</li>
<li>
<a href="/cell-phones">
Cell phones
</a>
</li>
<li>
<a href="/others">
Others
</a>
</li>
</ul>
</li>
<li>
<a href="/apparel">
Apparel
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/shoes">
Shoes
</a>
</li>
<li>
<a href="/clothing">
Clothing
</a>
</li>
<li>
<a href="/accessories">
Accessories
</a>
</li>
</ul>
</li>
<li>
<a href="/digital-downloads">
Digital downloads
</a>
</li>
<li>
<a href="/books">
Books
</a>
</li>
<li>
<a href="/jewelry">
Jewelry
</a>
</li>
<li>
<a href="/gift-cards">
Gift Cards
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form action="/search" method="get" onsubmit="return check_small_search_form()"> <div class="search_box pull-right">
<input type="text" id="small-searchterms" autocomplete="off"
value="Search store" name="q" onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
</div>
Expected behaviour is like this.
1 When I click on any parent category text ( for example computers) , it should lead me to the category page.
2 when I click on the down arrow for the category it should expand and show the subcategory items
All of them works fine, But now I want to move the down arrow to right applying a style="float:right" to the element. But now my expected behaviour 2 is broken.It is leading me to the corresponding page instead of expanding the subcategory items.
What am I doing wrong here?

By floating the font awesome icons to the right instead of the actual a tags i got it to work. Only thing is i couldn't get rid of the padding at the bottom. maybe you want it there? https://jsfiddle.net/RachGal/zuer7g75/3/
$(document).ready(function() {
$('.navbar a.dropdown-toggle').on('click', function(e) {
var elmnt = $(this).parent().parent();
if (!elmnt.hasClass('nav')) {
var li = $(this).parent();
var heightParent = parseInt(elmnt.css('height').replace('px', '')) / 2;
var widthParent = parseInt(elmnt.css('width').replace('px', '')) - 10;
if (!li.hasClass('open')) li.addClass('open')
else li.removeClass('open');
$(this).next().css('top', heightParent + 'px');
$(this).next().css('left', widthParent + 'px');
return false;
}
});
});
function setMouseHoverDropdown() {
if ($(window).innerWidth() > 767) {
$('ul.nav li').hover(function() {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
}
}
$(window).load(function() {
setMouseHoverDropdown();
});
$(document).ready(function() {
setMouseHoverDropdown();
});
$(window).resize(function() {
setMouseHoverDropdown();
});
.fa-angle-down {
float: right;
margin-top: -50px;
}
a.dropdown-toggle {
height: 10px;
padding-bottom: 0px!important;
line-height: 1!important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".category-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 category-navbar-collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span>
</li>
<li> <a href="/computers">
Computers
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/desktops">
Desktops
</a>
</li>
<li> <a href="/notebooks">
Notebooks
</a>
</li>
<li> <a href="/software">
Software
</a>
</li>
</ul>
</li>
<li> <a href="/electronics">
Electronics
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/camera-photo">
Camera & photo
</a>
</li>
<li> <a href="/cell-phones">
Cell phones
</a>
</li>
<li> <a href="/others">
Others
</a>
</li>
</ul>
</li>
<li> <a href="/apparel">
Apparel
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/shoes">
Shoes
</a>
</li>
<li> <a href="/clothing">
Clothing
</a>
</li>
<li> <a href="/accessories">
Accessories
</a>
</li>
</ul>
</li>
<li> <a href="/digital-downloads">
Digital downloads
</a>
</li>
<li> <a href="/books">
Books
</a>
</li>
<li> <a href="/jewelry">
Jewelry
</a>
</li>
<li> <a href="/gift-cards">
Gift Cards
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form action="/search" method="get" onsubmit="return check_small_search_form()">
<div class="search_box pull-right">
<input type="text" id="small-searchterms" autocomplete="off" value="Search store" name="q" onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
</body>

You can just make the a tags within the li to float left, then it should work.
.navbar-default .navbar-nav>li>a {
float:left;
}
Please change the css to be relevant to your project.
In order to get the clicking of the arrow down to work:
close all other drop downs that are currently visible.
remove the "open" class from all OTHER li.
toggle the open class from the current li that corresponds to our click.
toggle the visibility of the drop down that corresponds to our click.
Within the hover code, we also toggle the open class on the li. If a user hovers over arrow down, then we addClass open to the corresponding li. And vice versa.
Please see: https://jsfiddle.net/qynfvow3/30/

Logo at the top of navigation bar hide when scroll down

I'm using bootstrap v3.3.4 to make navigation header...here is my DOM for navigation bar:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<img id="header-logo" src="/assets/img/dashboard/pencil_demo.png">
<hr id="header-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="/">Home</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Profile <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Profile</li>
<li>My Billing</li>
<li>My Badges</li>
</ul>
</li>
<li class="dropdown">
Friends <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Friends</li>
<li>Search Friends</li>
<li>Invite Friends</li>
</ul>
</li>
<li>Ask Question</li>
<li>My Revision</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="circle-image-user" style="margin-top:-6px;"></span></li>
<li><span class="circle-image-school" style="margin-top:-6px;"></span></li>
<li>Dashboard</li>
<li>Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
My current output:
How I can hide pencil-company logo when I scroll down? Let say the navbar will be like this when I scroll down:
When I go up back at the top...I want to keep the logo at the top of navigation bar...
Sample of company logo:

$(function() {
$(window).scroll(function() {
var x = $(window).scrollTop();
if (x >= 42) {
$("#header-logo").hide();
} else {
$("#header-logo").show();
}
});
});
#header-logo {
height: 100px;
}
body {
height: 5000px;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<img id="header-logo" src="http://farm4.static.flickr.com/3254/3322981237_7e723b609e.jpg">
<hr id="header-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="/">Home</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Profile <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Profile
</li>
<li>My Billing
</li>
<li>My Badges
</li>
</ul>
</li>
<li class="dropdown">
Friends <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Friends
</li>
<li>Search Friends
</li>
<li>Invite Friends
</li>
</ul>
</li>
<li>Ask Question
</li>
<li>My Revision
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="circle-image-user" style="margin-top:-6px;"></span>
</li>
<li><span class="circle-image-school" style="margin-top:-6px;"></span>
</li>
<li>Dashboard
</li>
<li>Logout
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<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.4/js/bootstrap.min.js"></script>
</body>
</html>

Here is a working example:
window.onscroll = function (e)
{
$('#lion_image').hide();
}
.test {
height: 2000px;
}
#lion_image {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"><img src="http://www.emoticonswallpapers.com/avatar/animals/Lion-Side-Profile.jpg" alt="lion" id="lion_image"/>Let's start</div>

I think you can move your logo from navbar to outside the navbar and use .sticky-top in tag

My top level menu items do not work - TWITTER Bootstrap

I have a drop down menu with bootstrap, here is a fiddle:
http://jsfiddle.net/ajfbqfej/
<nav id="navvy" class="navbar navbar-inverse" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex8-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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex8-collapse">
<ul class="nav navbar-nav">
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="#">Capabilities</a>
<ul class="dropdown-menu">
<li>Precision Machining</li>
<li>CNC Turning</li>
<li>Swiss Screw Machining</li>
<li>Medical Machining</li>
<li>CNC Milling</li>
<li>Secondary Operations</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="#">Products</a>
<ul class="dropdown-menu">
<li>Miniature Parts</li>
<li>Nozzles</li>
<li>Bike Chain Link</li>
<li>Shafts</li>
<li>Fasteners & Screws</li>
<li>Brackets, Plates & Mounts</li>
<li>Valves</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="#">Material Specialties</a>
<ul class="dropdown-menu">
<li>Stainless Steel</li>
<li>Plastic</li>
<li>Aluminum</li>
<li>Steel</li>
<li>Brass</li>
<li>Hastelloy</li>
<li>Monel </li>
<li>Titanium</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/About">About</a>
<ul class="dropdown-menu">
<li>Quality Assurance</li>
<li>Equipment</li>
<li>Industries Served</li>
</ul>
</li>
<li class=" ">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Gallery">Gallery</a>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Resources">Resources</a>
<ul class="dropdown-menu">
<li>Latest News</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Contact-Us">Contact Us</a>
<ul class="dropdown-menu">
<li>Careers</li>
<li>RFQ</li>
</ul>
</li>
<li class=" ">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Glossary">Glossary</a>
</li>
<li class=" ">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Resources/Forster-Blog">Blog</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
The top level items are not clickable, can anyone see what I might be doing wrong? Otherwise it works great.
Thanks!

OK - for me I just had to remove the data-toggle attribute from my anchors... weird!