Bootstrap mobile menu button not visible - javascript

I'm not able to view the menu button of bootstrap menu when it is displayed in mobile view.In the same time I need to remove all the ui styling offered by the Bootstrap and have my own styling for navbar.
<nav class="navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<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" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</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>


You should add navbar navbar-default or navbar navbar-inverse so you navigation links, button etc have color/states applied to them.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
If you want a transparent or white background uss CSS.
Docs
With navbar-default
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<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" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</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>
Transparent Background
.navbar.navbar-default {
background: transparent;
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<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" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</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>

Related

how to make head of dropdown link clickable in navbar

I want to make the dropdown items appear on hover of the parent link, and to be clickable to a another page, how can this be done?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#app-nav" 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 navbar-link" href="#"> <img src="assets/img/Saydullogo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="app-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="fa fa-home"></span> Home</li>
<li class="dropdown">
<span class="fa fa-medkit"></span> Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Beauty</li>
<li>Cosmetics</li>
<li>Medicines</li>
</ul>
</li>
<li><span class="fa fa-edit"></span> Registeration</li>
<li><span class="fa fa-phone-square"></span> Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

put this css in your code
.dropdown:hover .dropdown-menu {
display: block !important;
}
check out this snippet with your code
.dropdown:hover .dropdown-menu {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#app-nav" 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 navbar-link" href="#"> <img src="assets/img/Saydullogo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="app-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="fa fa-home"></span> Home</li>
<li class="dropdown">
</span> Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Beauty</li>
<li>Cosmetics</li>
<li>Medicines</li>
</ul>
</li>
<li><span class="fa fa-edit"></span> Registeration</li>
<li><span class="fa fa-phone-square"></span> Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

this.girish - that code works perfectly.

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>

Making the body of nav under the ehader in bootstrap

What I want to do is making the menu 1,2,3 under the header title not besides it :
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<h1>First Project in Bootstrap</h1>
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"aria-expanded="false">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<div class="nav nav-stacked">
<li>Menu 1 </li>
<li>Menu 2</li>
<li>Menu 3</li>
</div>
</ul>
</div>
</div>
</nav>
I want the Menu 1 under the the header title not beside it .. any suggestions ??

Working fiddle.
If you don't have access to the HTML code you could append it to the header when then page is ready :
$(function(){
$('.navbar-header').append( $('#bs-example-navbar-collapse-1') );
})
Hope this helps.
$(function(){
$('.navbar-header').append( $('#bs-example-navbar-collapse-1') );
})
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<h1>First Project in Bootstrap</h1>
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"aria-expanded="false">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<div class="nav nav-stacked">
<li>Menu 1 </li>
<li>Menu 2</li>
<li>Menu 3</li>
</div>
</ul>
</div>
</div>
</nav>

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

Categories