The following is a standard jQuery scroll function for nav-bar collapsing that I found on sof. For some reason, when I try to change the default speed of the header-wrap, it isn't changing. I can't figure out why. Is this a bug or am I doing something wrong?
$(document).ready(function() {
$('#header-wrap').hide();
})
var previousScroll = 0, headerOrgOffset = $('#header').height();
$('#header-wrap').height($('#header').height());
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$('#header-wrap').slideDown( "slow", function() {
// Animation complete.
});
} else {
$('#header-wrap').slideUp();
}
}
previousScroll = currentScroll;
});
<!-- Navigation Scroll Bar-->
<div id="header-wrap">
<div id="header" class="clear">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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.html">Start Bootstrap</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 navbar-right">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li class="dropdown">
Portfolio <b class="caret"></b>
<ul class="dropdown-menu">
<li>
1 Column Portfolio
</li>
<li>
2 Column Portfolio
</li>
<li>
3 Column Portfolio
</li>
<li>
4 Column Portfolio
</li>
<li>
Single Portfolio Item
</li>
</ul>
</li>
<li class="dropdown">
Blog <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Blog Home 1
</li>
<li>
Blog Home 2
</li>
<li>
Blog Post
</li>
</ul>
</li>
<li class="dropdown">
Other Pages <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Full Width Page
</li>
<li>
Sidebar Page
</li>
<li>
FAQ
</li>
<li>
404
</li>
<li>
Pricing Table
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
</div>
Related
I have a bootstrap nav bar. In which i have multiple drop-down items.
Now I have another div col-md-3.
In this div I want show the items of the dropdown which I hover. For now if i hover over a dropdown then the submenu is showed instead of clicking.
So how can I show the sub items of a drodown menu in that div ?
I want that subitems are in drop-down and also in that side bar div.
My Code is like this:
<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>
</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>Dashboard</li>
<li class="dropdown">
Administration <span class="caret"></span>
<ul class="dropdown-menu">
<li>Time Zone</li>
<li>Holidays</li>
<li>Working Hours</li>
<li> Promt Language</li>
<li>Phone No Allocation & Extensions</li>
<li>Speed Dial</li>
<li>Confernce Welcome Message</li>
</ul>
</li>
<li class="dropdown">Dial Plan<span class="caret"></span>
<ul class="dropdown-menu">
<li>Current Dial Plan</li>
<li>Caller ID Management</li>
<li>ISD Management</li>
<li>Block Number</li>
<li>Override</li>
<li>Location</li>
</ul>
</li>
<li class="dropdown">Routing<span class="caret"></span>
<ul class="dropdown-menu">
<li>24 Hours</li>
<li>Working Hours</li>
<li>OFF Hours</li>
<li> Location Based Routing </li>
</ul>
</li>
<li>Call Recording</li>
<li class="dropdown">
Users <span class="caret"></span>
<ul class="dropdown-menu">
<li>Add User</li>
<li>View Users</li>
</ul>
</li>
<li class="dropdown">
Voice Mail<span class="caret"></span>
<ul class="dropdown-menu">
<li>Default</li>
<li>For each user</li>
</ul>
</li>
<li class="dropdown">
Provisioning <span class="caret"></span>
<ul class="dropdown-menu">
<li>Manual Softphone Configuration</li>
<li>Add Deskphone</li>
<li>Devices</li>
<li>Edit</li>
<li>Delete</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="col-md-12" >
<!-- Side bar-->
<div class="col-md-3">
</div>
</div>
</div>
Your code is correct, however it seems you forgot to include jQuery in your code.
I created a Codepen using your code and I've included jQuery.js at the bottom just before including the Bootstrap library.
As you can see the dropdown items work fine and, as you remove the jQuery script from the code, you can reproduce your broken scenario.
Here is the link: Codepen Link
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I have already tried to do research to fix this problem but no fixes were working! I am using a Bootstrap 3 navigation for my site and it works great on desktop. However, in the mobile menu, I click on an item, expecting the sub nav to appear, and the whole menu closes instead - after first flashing the text of the sub nav for a millisecond. How can I fix this??
Thanks
Edit: here is my navbar setup
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="http://totango2015.staging.wpengine.com/">
<img src="http://totango2015.staging.wpengine.com/wp-content/themes/totango/assets/img/global/totango_logo.png" class="top-logo" />
</a>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul id="menu-primary-navigation" class="nav navbar-nav"><li class="menu-product">product</li>
<li class="menu-customers">customers</li>
<li class="dropdown menu-resources"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#">resources <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-customer-success-resources">customer success resources</li>
<li class="menu-events-webinars">events & webinars</li>
<li class="menu-totango-support">totango support</li>
</ul>
</li>
<li class="menu-blog">blog</li>
<li class="dropdown menu-company"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#">company <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-about-us">about us</li>
<li class="menu-news">news</li>
<li class="menu-careers">careers</li>
<li class="menu-contact-us">contact us</li>
</ul>
</li>
<li class="menu-login">login</li>
</ul> </div>
<!-- /.navbar-collapse -->
<hr class="nav-rule">
</div>
<!-- /.container -->
</nav>
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
I want have something like navbar-toggle. When user click on it the large div in width and height open open up just like when clicking on navbar-header containg button with class "navbar-toggle"
Any idea of how can I do this using bootstrap?
I have something like this for simple drop down menu but it's a navbar I hope you understand me.
<div class="bs-example">
<nav id="myNavbar" style="width:95%;" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">Category</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>Home</li>
<li>Profile</li>
<li class="dropdown">
Messages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Admin <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Settings</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
You can create it by jQuery click function. it's very simple.
jQuery(".classNameWhichWillShow").hide();
jQuery(".class_name_where_click").click(function(){
jQuery(".classNameWhichWillShow").slideToggle(100);
});
When I am resizing the browser screen to mobile size, desktop menu replaced by dropdown with multiple options:
But how to change that dropdown to menu with button like that:
By clicking the "Menu" button menu showing and hiding
In order to get menu like above we have to follow this markup
<div class="row-fluid">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a 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>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Features</li>
<li>Pricing</li>
<li class="dropdown">
Products<b class="caret"></b>
<ul class="dropdown-menu">
<li>Latest Products</li>
<li>Popular Products</li>
</ul>
</li>
<li class="dropdown">
Membership<b class="caret"></b>
<ul class="dropdown-menu">
<li>Personal Membership</li>
<li>Premium Membership</li>
</ul>
</li>
<li>Offers</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
DEMO