We Keep Coding

Active menu not highlighted in Boostrap and Javascript, how do I solve this?

I have tried to highlight the active menu bar via the code below but can not figure out why it is not working. Would someone kindly lead me through. Thank you.
Both my HTML and my Js scripts are below:
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Transactions
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Payments</li>
<li>Make Receipts</li>
<li>Payments on Date</li>
<li>Valuable Customer</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SMS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Bulk SMS</li>
<li>Most Valuable SMS</li>
<li>SMS</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>

$(".nav a").on("click", function(){
$(".nav li").removeClass("active");
$(this).parent().addClass("active");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Transactions
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Payments</li>
<li>Make Receipts</li>
<li>Payments on Date</li>
<li>Valuable Customer</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SMS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Bulk SMS</li>
<li>Most Valuable SMS</li>
<li>SMS</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>

You need to remove your add and then add CSS to force making active for sub menu and so on
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
ul li ul li .active {background: lightskyblue; }
</style>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Transactions
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" class="active" >Payments</a></li>
<li>Make Receipts</li>
<li>Payments on Date</li>
<li>Valuable Customer</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SMS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Bulk SMS</li>
<li>Most Valuable SMS</li>
<li>SMS</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>

Bootstrap navbar doesnt hide after click

How to change data-offset-top for mobile view? Also, on click link doesn't hide the menu. I tried some founded code from stackoverflow but no luck. Could someone please help with this link below :
http://smalldesigncompany.com/client/agami/s4/index.html
<nav class="navbar navbar-default zero-mar" >
<div class="container">
<!-- 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=".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><!--NAVBAR-HEADER-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 pull-left">
<ul class="nav navbar-nav">
<li>
<a class="scroll" href="#top">Home</a>
</li>
<li>
<a class="scroll" href="#people">Meet Our People</a>
</li>
<li>
<a class="scroll" href="#projects">Our Capabilities</a>
</li>
<li>
<a class="scroll" href="#process">Our Process</a>
</li>
<li>
<a class="scroll" href="#why">Why Agami</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="right">Projects</span></li>
<li><span class="right">Contact</span></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>

This answer might make think I oversimplify the thing, but often I see jquery/bootstrap scripts loaded twice, and that means two listeners waiting for the button toggle. The first one opens, the second one closes instantly.
Solution: look for scripts loaded twice via browser inspecting (F12) and remove where is convenient.

try this way
$('.navbar-nav a').on('click', function () {
$(".navbar-toggle").click() //bootstrap 3.x
});

Never use multiple IDs on same div
And for the navbar-toggle just use ID of your navbar-collapse menu in the data-target attribute of the navbar-toggle as:
data-target="#bs-example-navbar-collapse-1"
And for hiding the navbar-collapse menu again you have to trigger the click of your navbar-toggle button on the click of .navbar-nav > li > a as:
Code Snippet
$('.navbar-nav > li > a').on('click', function() {
$('.navbar-toggle').trigger('click');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default zero-mar">
<div class="container">
<!-- 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">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--NAVBAR-HEADER-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse pull-left" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="scroll" href="#top">Home</a>
</li>
<li>
<a class="scroll" href="#people">Meet Our People</a>
</li>
<li>
<a class="scroll" href="#projects">Our Capabilities</a>
</li>
<li>
<a class="scroll" href="#process">Our Process</a>
</li>
<li>
<a class="scroll" href="#why">Why Agami</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="right">Projects</span>
</li>
<li><span class="right">Contact</span>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>

$('.navbar-nav > li > a').on('click', function() {
$('.navbar-toggle').trigger('click');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default zero-mar">
<div class="container">
<!-- 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">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--NAVBAR-HEADER-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse pull-left" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="scroll" href="#top">Home</a>
</li>
<li>
<a class="scroll" href="#people">Meet Our People</a>
</li>
<li>
<a class="scroll" href="#projects">Our Capabilities</a>
</li>
<li>
<a class="scroll" href="#process">Our Process</a>
</li>
<li>
<a class="scroll" href="#why">Why Agami</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="right">Projects</span>
</li>
<li><span class="right">Contact</span>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>

Twitter Bootstrap, Nav-bar , Drop down not working properly

I am trying to make a responsive nav-bar with bootstrap. However, the drop down menu is not working properly.
I want to have the drop down under the brand name not along with it.
Here is my code:
<html>
<head>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
ACUPRESSURE
<button type="button" class = "navbar-toggle" data-toggle ="collapse" data-target = ".navHeaderCollapse">
<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 = "collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src= "js/bootstrap.js"></script>
</body>
</html>

You're missing the navbar-header class that surrounds navbar-toggle and navbar-brand. See the Docs.
Working Example.
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>ACUPRESSURE
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
</ul>
</div>
</div>
</div>

Strange spacing in twitter bootstrap top navbar

I've been using Twitter Bootstrap to create a navbar across the top of a page which has several dropdown menus. For some reason, the first list element aligns to the bottom of the bar by virtue of a empty link that fills the top space. I copied this first term for the other list items, but none of the other elements align to the bottom or have an empty link. Any ideas for how i can fix this?
<!DOCTYPE html>
<html>
<head>
<title>Nav Mockup</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">NCTL<a>
<button class="navbar-toggle" data-toggle="collapse" data-target="navbarHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navbarHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Challenge / Links</li>
<li>STEM Equity</li>
<li>Slannis Message</li>
<li>Supporters</li>
<li>MOS Press Room</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>K12 Classroom</li>
<li>Museum Based</li>
<li>Traveling</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Achievements</li>
<li>Resources</li>
<li>Video Links</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Enews Archive</li>
<li>NCTL Studies</li>
<li>Media Coverage</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

You a error in your markup
<a href="#" class="navbar-brand">NCTL<a>
Should be:
NCTL
DEMO HERE

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