We Keep Coding

Fixed Navbar stops from scrolling

I'm using the below function to make a fixed navbar. However, at a certain height (when almost the whole page is showing but it has scroll) it prevents the page from scrolling and the page resists to scroll. I want the navbar to be sticky but not stop the page from scrolling at a certain height. any help will be highly appreciated. Thanks
HTML:
<nav id="navbar_2" class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle navbar-toggle-sidebar collapsed">
MENU
</button>
<a class="navbar-brand" href="#"><img src="https://cdn2.vectorstock.com/i/1000x1000/19/11/wi-fi-hotspot-icon-flat-design-vector-14071911.jpg" class="img-responsive" alt="Logo" align="center" ><br><br></a>
<!--<span class="navbar-text"><img src="" width=20% height=20%></span>
--><!--<img src="https://cdn2.vectorstock.com/i/1000x1000/23/56/mobile-phone-icon-vector-2382356.jpg" width="40px" height="50px" id=mobile_info4 style="margin: 15px -330px;"/>
-->
<span class="navbar-text" id=mobile_info style="font-size: 12px;">
<%= address %><br>
<%= manufacturer %><br>
<%= model %><br>
</span>
<a class="navbar-brand" href="#" hidden>
Administrator
</a>
<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>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<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" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" method="GET" role="search" >
<div class="form-group">
<input type="text" name="q" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="/index/<%= role %>/<%= _id %>/<%= token %>" >Home</a></li>
<!--<li class="dropdown">-->
<li><a href="/logout" >Logout</a></li>
<!-- <li><a href="/test2" >Testing Page</a></li>
-->
<!--<a href="/logout" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">-->
</ul>
<!--<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">SETTINGS</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Javascript:
$(document).ready(function() {
var $navbar = $("#navbar_2");
AdjustHeader(); // Incase the user loads the page from halfway down (or something);
$(window).scroll(function() {
AdjustHeader();
});
function AdjustHeader(){
if ($(window).scrollTop() > 60) {
if (!$("#navbar_2").hasClass("navbar-fixed-top")) {
$("#navbar_2").addClass("navbar-fixed-top");
$('body').css('padding-top', $('.navbar').outerHeight() + 'px');
}
} else {
$("#navbar_2").removeClass("navbar-fixed-top");
$('body').css('padding-top', '0');
}
}
});
CSS:
#navbar_2 a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

Unable to get navigation to collapse automatcially in mobile view

How come the data-toggle doesn't work? The menu stay open when pressed! Looking to get it to close! Any ideas?
I'm not sure what else to do!! Thanks
<!-- main nav -->
<nav id="navbar-collapse" class="collapse in navbar-collapse navbar-right" role="navigation">
<ul id="nav" class="nav navbar-nav">
<li><a style="color: #9d9d9d;" href="#body">Home</a></li>
<li><a style="color: #9d9d9d;" href="#about">About</a></li>
<li><a style="color: #9d9d9d;" href="#portfolio">Screenshots</a></li>
<li><a style="color: #9d9d9d;" href="#testimonials">Testimonials</a></li>
<li><a style="color: #9d9d9d;" href="#price">Features</a></li>
<li><a style="color: #9d9d9d;" href="#contact">Contact</a></li>
<li><a style= "background-color: #2a7ead; color: #fff;"href="#yo">Buy Now</a></li>
</ul>
</nav>
<!-- /main nav -->
<div class="navbar-header" >
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" 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>
<!-- /responsive nav button -->
<!-- logo -->
<img style="padding-left: 7px;" src="img/logo.png" alt="logo">
<!-- /logo -->
</div>

Dropdown menu not working in desktop mode

I am working on the CSS dropdown below. It is working fine for the mobile version but for the desktop version it is creating a problem.
<div class="container">
<div class="navbar-header">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-6"> <a class="navbar-brand" href="#/home"><img src="img/logo.png" class="img-responsive" alt="Learn Education" title="Learn Education"/></a></div>
<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>
</div>
<div class="collapse navbar-collapse col-lg-6 col-md-6 col-sm-12 col-xs-7 pull-right" id="bs-example-navbar-collapse-1" style="border:none;border-radius:15px;">
<ul class="nav navbar-nav navbar-right changeme" id="visibid">
<li> Home </li>
<li>LogIn</li>
<li>SignUp</li>
<li class="dropdown">
Sample Test <b class="caret"></b>
<ul class="dropdown-menu">
<li>Mathematics</li>
<li>Physics</li>
<li>Chemistry</li>
</ul>
</li>
<li>Reports</li>
<li>About Us</li>
<li>Contact Us</li>
<li>DashBoard</li>
</ul>
</div>
</div>
Here is the Plnkr.
In order to see the error please switch to fullscreen mode and press any of those buttons.

add media queries
#media screen and (min-width: 768px) {
#bs-example-navbar-collapse-1{
display:none;
}
}

You need to remove data-target=".navbar-collapse" data-toggle="collapse" from all the links - this is causing the Bootstrap JS to try and collapse the menu

twitter-bootstrap nav not toggling collapse

Here is my markup for my nav using bootstrap....
I'm not sure why the div with class of 'mynavbar' is not toggling open and close (by adding the 'in' class to it) when the button with a data-target='.mynavbar' is clicked (this is only on smaller screens where the hamburger type menu shows instead of the links "work, about, contact)
ALso, on large and small screens, should the li's that are clicked on have the class of "active" added to them? I'm not seeing this happen either
<nav class='navbar navbar-fixed-top drop-shadow'>
<div class='container-fluid'>
<div class='navbar-header page-scroll'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.mynavbar'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand page-scroll' href='#'><i class='glyphicon glyphicon-home'></i></a>
</div>
<div class='collapse navbar-collapse mynavbar'>
<ul class='nav navbar-nav'>
<li><a class='page-scroll' href='#work'>Work</a></li>
<li><a class='page-scroll' href='#about'>About</a></li>
<li><a class='page-scroll' href='#contact'>Contact</a></li>
</ul>
</div>
</div>
</nav>

You need to target to ID in <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">, instead of class. Then change the element that has collapse navbar-collapse class to <div class="collapse navbar-collapse" id="mynavbar">
Overall, this code should work for you
<nav class="navbar navbar-fixed-top navbar-inverse drop-shadow" role="navigation">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#">
<i class="glyphicon glyphicon-home"></i>
</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li class="active"><a class="page-scroll" href="#work">Work</a></li>
<li><a class="page-scroll" href="#about">About</a></li>
<li><a class="page-scroll" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
And, you can add class="active" to your <li> when clicked, this is often handled in the server-side or in your own URL router

Trying to display a link text and a link icon on the same line

I'm using bootstrap to create a responsive navigation, and I'm using one of the icons that bootstrap provides to create a show/hide menu. The problem is that it is displaying the arrow on a different line. Is there a way to display the arrow next to the text on one line?
Here is a demo: http://jsfiddle.net/0L6g87h2/
Here's the code that is accompanied with this fiddle to make this self contained:
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-2">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Left Navigation</span>
</div><!--/.navbar-header -->
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<nav id="leftNav" role="navigation" aria-label="Left Navigation">
<!-- TemplateBeginEditable name="Left Navigation" -->
<ul class="nav navbar-nav">
<li>Home</li>
<li><strong>Cars</strong>
</span>
<ul id="ELP">
<li>BMW</li>
<li>Honda</li>
<li>Toyota</li>
</ul>
</li>
</ul>
</nav> <!-- /Left Navigation -->
</div>
<!--/.nav-collapse -->
</div> <!--/.navbar-default -->
</div> <!--/.sidebar-nav -->
</div> <!--/.col-sm-3 col-md-3 col-lg-2-->

You can include the icon span within the a element. Updated fiddle
<a href="">
<strong>Cars</strong>
<span class="glyphicon glyphicon-circle-arrow-right"></span
</a>
You can also use bootstrap's pull-left and pull-right classes. Updated fiddle
<a href="" class="pull-left">
<strong>Cars</strong>
</a>
<a href="" class="pull-right">
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>

You can wrap the two elements within a span and set the span to display:inline or inline-block.
<span style="display:inline-block;">
<strong>Cars</strong>
<a href="#ELP" class="expander" >
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</span>
http://jsfiddle.net/0L6g87h2/2/

Try this...
<a href="#">
<span class="glyphicon glyphicon-chevron-right"></span> Demo
</a>