I'm trying to get the sticky bootstrap menu to work on desktops. When i scroll down to a certain div element i want the sticky menu to appear BUT when the user scrolls back up and past that div element i want the sticky menu to be hidden. Can't quite figure out whats going on.
<!--sticky desktop menu-->
<div id="nav">
<div class="navbar navbar-default navbar-fixed-top hidden-lg navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="/"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>PRICING</li>
<li>WATCH OUR VIDEO</li>
<li>REAL LIFE TESTIMONIALS</li>
<li>FAQ'S</li>
<li>ABOUT US</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Script below;
$('#nav').affix({
offset: {
top: $('.desktopSticky').height()
}
});
Site can be seen here: http://bit.ly/1i4VUxv
If you're ok doing it via scroll-position vs a defined div, this will work for you:
$(function() {
var div = $(".sticky");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
div.removeClass('hidden-lg').addClass("visible-lg");
} else {
div.removeClass("visible-lg").addClass('hidden-lg');
}
});
});
See the bootply: http://www.bootply.com/CGY86c9Baz
If you prefer it be activated by a specific div, I think scrollspy may be your solution, but I don't know how to make it work!
Related
When I try to open the menu on mobile, it does not open and instead, you just select the whole menu bar. It looks like this on the actual website: menu after being clicked on (clicked on the actual button in the right corner).
Meanwhile, this is the relevant code from the navbar.php:
<nav class="navbar navbar-default">
<div class='container'>
<div class="navbar-header">
<button type="button" id='navbar-toggle' 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 class="brand">
<img src="assets/img/logo.svg" alt="logo">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
Also, not sure if it makes a difference although the PHP file is named navbar.inc.php. And also, I'm not sure if it has to do anything with the jquery.js file.
I am just not sure what i am missing on this drop down hamburger iam pretty sure my data-target is right
<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="#myNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">T<span> - </span>C<!--<img src="#">--></div>
</div>
<div class="navbar-collapse collapse" id="myNav">
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="#home">Home</a></li>
<li>About</li>
<li>Employment</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You need an onclick event on your button. There's currently nothing telling it what to do when you click the button. To get you started, you'll need to modify you button tag to something like:
<button onclick="toggleMenu" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
Then, add some script:
function toggleMenu() {
let menu = document.getElementById('menu');
menu.classList.toggle('open-menu'); //toggle is an awesome built in function that does just what you want. It will add this class if it doesn't exists, and remove it if it does
}
After that, you'll have to add some CSS to style your menu for when it's opened.
Looks fine to me, just be sure that your view width is less than 768px, otherwise the hamburger will be hidden.
First of all, please be inform that I already know, we can add affix utility to all kind of regular navbar in Bootstrap, In my case ,however, I need to add the affix to a specifically navbar-fixed-bottom Navbar.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
<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.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<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" 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="#">Brand</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>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<div class="container" style="height:3000px;"></div>
The reson that I would like to do this is presenting the navbar at the bottom of viewport on page loading and on scroll down affix it to the top.
Can you please let me know if this is doable?
You need to add CSS to handle the navbar when affix is applied. In your case, that would be changing the navbar top:0; so that it no longer is fixed to the botttom.
.affix.navbar-fixed-bottom {
top: 0;
height: 50px;
}
https://www.codeply.com/go/jYikJAul9j
i know this question is been so much in this forum, but i am having a problem here despite googling for hours. I want when i selected /click submenu the parent li get class .actives using Javascript/Jquery. Thanks for your help :)
Here is my code:
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid container">
<div class="row m04m">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_nav">
<span class="bars">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
<span class="btn-text">Select Page</span>
</button>
</div>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class=" dropdown">
ABOUT
<ul class="dropdown-menu" role="menu">
<li>About Company</li>
<li>About Jump</li>
</ul>
</li>
<li>LINK</li>
</ul>
</div>
</div>
</div>
</nav> <!--Main Nav-->
and here is my css
.actives{background-color:#174069;}
Thanks for your help
this example code will help you modify it as your requirement
$('#menu').find('li').click(function(){
//removing the previous selected menu state
$('#menu').find('li.active').removeClass('active');
//is this element from the second level menu?
if($(this).closest('ul').hasClass('secondLevel')){
$(this).parents('li').addClass('active');
//this is a parent element
}else{
$(this).addClass('active');
}
});
#menu li.active{
background: #ccddff;
}
demo sample code:
http://jsfiddle.net/L94N6/4/
I can't for the life of me firgure out why I can't get my scroll spy to work. Here is the code below. Is there anything that jumps out at someone where I went wrong? I read a number of these posts and couldn't figure my own out. This is the first time going through the scroll spy so I am mostly copying code for W3schools or bootply. I am using the ID #nav for all of calls after i set the spy target. Any assistance would be greatly appreciated.
<body class="body" data-spy="scroll" data-target="#nav">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-static-top" id="nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">#HappilyEverManca</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li>Location</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->
With the JS
$(document).ready(function () {
/* affix the navbar after scroll below header */
$('#nav').affix({
offset: {
top: $('header').height()-$('#nav').height()
}
});
/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#nav' })
/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
var link = $(this).attr('href');
var posi = $(link).offset().top;
$('body,html').animate({scrollTop:posi},700);
});
});