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);
});
});
Related
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 have an issue with my two navigation menus. I’m using two of the same type navigation that comes with Bootstrap. The first navigation is using the “navbar-inverse” class and the second navigation menu is using “navbar-default” class with some minor modification. The issue appears when you click on dropdown menu in the right corner; the second navigation menu will overlap the dropdown box and only content below the menu is visible.
Please look at the attachment below for illustration.
This is my current HTML setup:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<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="#"><span class="glyphicon glyphicon-home"></span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Hjem</li>
...
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Innstillinger <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div id="navbar">
<ul class="nav navbar-nav">
...
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
This is my current issue illustrated:
I have created a JSfiddle with corresponding stylesheets and frameworks to look at: http://jsfiddle.net/1L3voL3h/. Unfortunately, at this point I haven't been able to find a solution by myself. Thanks in advance for any help.
change this <nav class="navbar navbar-default navbar-static-top">
to <nav class="navbar navbar-default navbar-static"> from your second nav bar
just add this for your second navbar
<style>
.second-navbar {
top: 50px;
z-index: 999;
}
</style>
You can change the z-index of your navbar-default or of your dropdown menu. Something like:
.navbar-default {
background: #b6d24b;
border-radius: 0px;
z-index: 1;
}
or:
.dropdown-menu {
z-index: 5
}
I updated your JSFiddle
You only need to add to your CSS:
.navbar-inverse.navbar-static-top {
z-index: 800;
}
.navbar-default.navbar-static-top {
z-index: 700;
}
The problem is that you are applying z-index:1000 to both of your navigation bars. With this rule:
.navbar-static-top {
z-index: 1000;
border-width: 0 0 1px;
}
You should change this rule and/or add the ones I provided above to give your first navigation bar a higher z-index value.
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!