How to change navbar-default to navbar-inverse on scroll? - javascript

At the top of my website, the main navigation class is:
navbar navbar-default navbar-fixed-top bg
I am trying to make it so when you scroll, the class changes to so I can create a more elegant and easier scroll animation:
navbar navbar-inverse navbar-fixed-top bg
How is this accomplished with Javascript? I can't find ANYTHING on the internet...the one thing I did find let you remove one class but doesn't work because I have like 10 different classes at once...

Here's an example.
Use $(window).scroll() and addClass() to add the bg class to your nav when you scroll down past a certain point. Note that addClass and removeClass allow you to add/remove individual class names from tags where multiple classes exist.
Note that you will probably need to use !important to force the color change -- bootstrap can be tenacious.
var viz=true, win = $(window), nav=$('nav');
win.scroll(function(){
pos = win.scrollTop();
if ( viz && pos > 100 ){
viz = false;
nav.addClass('bg');
}else if ( !viz && pos < 100 ){
viz = true;
nav.removeClass('bg');
}
});
body,
html {
height: 2000px;
}
.bg{background:green !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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 class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1
</li>
<li>Page 1-2
</li>
<li>Page 1-3
</li>
</ul>
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</div>
</nav>

Related

Having trouble with addEventListerner on link tag [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 months ago.
I have a task where I have to add JS to my website navbar: when you click on the second element of the navbar, the first element's name should be changed.
I'm trying to change the first nav element's name when the second element of the nav is clicked.
This is what I have so far:
<script type="text/javascript">
function ChangeName(){
alert("Second label clicked");
var el1 = document.getElementById("el1");
el1.innerHTML = "New name";
}
var el2 = document.getElementById("el2");
el2.addEventListener("click", ChangeName)
</script>
And the navigator tag looks like this:
<nav class="navbar navbar-inverse navbar-fixed-top">
<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 id = "el1" class="navbar-brand" href="#">LABEL 1</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li id="el2">LABEL 2</li>
<li id="el3">LABEL 3</li>
<li id="el4">LABEL 4</li>
</div>
</nav>
However, it doesn't seem to work and I'm not sure how to use addEventListerner on links.
your html is off. You are missing a closing ul tag and 2 closing div tags. the rest works. be sure to add your script just before the closing body tag
function ChangeName() {
alert("Second label clicked");
var el1 = document.getElementById("el1");
el1.innerHTML = "New name";
}
var el2 = document.getElementById("el2");
el2.addEventListener("click", ChangeName)
<nav class="navbar navbar-inverse navbar-fixed-top">
<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 id="el1" class="navbar-brand" href="#">LABEL 1</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li id="el2">LABEL 2</li>
<li id="el3">LABEL 3</li>
<li id="el4">LABEL 4</li>
</ul>
</div>
</div>
</div>
</nav>

add class to parent li when submenu selected

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/

how to use JS function to change class of list dynamically

I want to change the class of list item dynamically according to user's click on it. I have a menu and I want to assign .active class to only that menu which is clicked by user and initially Home Menu must be active
Here is my code
function activeclass(id)
{
document.getElementById(id).className += "active";
}
<section id="menu-area">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<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>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- TEXT BASED LOGO <a class="navbar-brand" href="index.html">Inventive</a> -->
<!-- IMG BASED LOGO -->
<a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
#yield('logo')
<li id="home">Home</li>
<li id="aboutus">About Us</li>
<li id="products">Products</li>
<li id="gallery"><a href="{{ URL::route('gallery') }}" onclick="activeclass(id)" >Gallery</a></li>
<li id="contactus">Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</section>
in CSS file active class with li will be used to highlight the selected page menu
Although there are better ways to achieve the thing you want (like the #Jitendra Tiwari's answer or my example below), I want to point you to the problem in your code.
The problem is that you pass to the function activeclass an unknown parameter: id.
When you debug your code you can see that the id param is empty:
You need to pass a string parameter with the relevant id:
function activeclass(id) {
document.getElementById(id).className += "active";
}
.active {
background:red;
}
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<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>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- TEXT BASED LOGO
<a class="navbar-brand" href="index.html">Inventive</a> -->
<!-- IMG BASED LOGO -->
<a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
#yield('logo')
<li id="home">Home</li>
<li id="aboutus">About Us</li>
<li id="products">Products</li>
<li id="gallery"><a href="#" onclick="activeclass('gallery')" >Gallery</a></li>
<li id="contactus">Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
http://jsbin.com/dadoqop/edit?html,css,js
Also, remove the public keyword from your code. It's not in javascript
A working example without jQuery:
[].forEach.call(document.querySelectorAll('#top-menu a'), function(elm) {
elm.addEventListener('click', function() {
var active = document.querySelector('.active');
if (active) {
active.classList.remove('active');
}
elm.parentNode.classList.add('active');
});
});
.active {
background:red;
}
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<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>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- TEXT BASED LOGO
<a class="navbar-brand" href="index.html">Inventive</a> -->
<!-- IMG BASED LOGO -->
<a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
#yield('logo')
<li id="home">Home</li>
<li id="aboutus">About Us</li>
<li id="products">Products</li>
<li id="gallery">Gallery</li>
<li id="contactus">Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
You need to remove active class from other li and add on currently clicked item.
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('li').click(function(){
// Step 1 - remove active class from all `li`
$('li').removeClass('active');
// Step 2 - add active class on currently clicked li
$(this).addClass('active');
});
});
</script>
Don't forgot to include jquery library.
Using Javascript, you can use the below code:
var ul = document.getElementById("top-menu");
var li = ul.getElementsByTagName("li");
//Set the Home menu as active for first time
li[0].classList.add("active");
//add click event listener for each menu item, and add class active on current clicked menu item.
for(var i=0; i<li.length; i++){
li[i].addEventListener("click", function(){
removeActiveClass();
this.classList.add("active");
});
}
//Remove the active class from the menu items
function removeActiveClass() {
for(var i=0; i<li.length; i++){
li[i].classList.remove("active");
}
}
I have not used any jQuery. Hope this helps you. You do not need to add click event on HTML. Just the below HTML is enough:
<ul id="top-menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Try this method.
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
#yield('logo')
<li id="home">Home</li>
<li id="aboutus">About Us</li>
<li id="products">Products</li>
<li id="gallery"><a href="{{ URL::route('gallery') }}" class="{{ \Request::route()->getName() == 'gallery' ? 'active' : '' }}" >Gallery</a></li>
<li id="contactus">Contact</li>
</ul>

Issues with Bootstrap menu overlapping dropdowns

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.

Bootstrap collapsed menu not displaying with google map

I have a webpage which has a bootstrap navbar and a google map. navbar is fixed on top and the google map is placed so that to fill the rest of the screen
<div class="container-fluid">
<header class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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="brand" href="#">{{ HTML::image('images/logo.png', array('class'=>'logo')) }}</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Reports <b class="caret"></b>
<ul class="dropdown-menu">
<li>Report 1</li>
<li>Report 2</li>
<li>Report 3</li>
<li>Report 4</li>
</ul>
</li>
<li class="dropdown">
User <b class="caret"></b>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="main">
<div id="mapcanvas"></div>
</div>
</div>`
There is no problem with the loading of google maps and the navbar. But when the nav bar is collapsed and I am clicking the toggle button the menu is not getting displayed.
CSS:
html,body {width:100%;height:100%;margin:0;padding:0;}
#mapcanvas {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
}
Bootply : bootply.com/3ejKtiSHkw
i don't know exactly whats the problem, but ive found out theat it seems to be sth. with the css.
adding the navbar-fixed-top-class to your navbar makes the dropdown work. I don't know if thats you required behavior though.
so, to break it down:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
makes the dropdowns work in the collapsed navbar.

Categories