I use the class="active" on my navbar navigation items with the most current version of bootstrap (4) and it does not switch when I click on the links. I found similar questions to this and tried to make the javascript fit my own code, but it didn't work. Note: These links on my navbar are all on the same page. The goal is to make the clicked on nav-item link active so that the user knows what they're currently viewing on the page.
Here is what my javascript code looks like:
$(".nav .nav-link").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).addClass("active");
});
Here is what my html navbar code looks like:
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<img class="logo" src="images/logo.png" width="55px" align="left">
<a class="navbar-brand" href="index.html">ROWAN AEÎ </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<!--Div for Alignment Purposes Below -->
<div class="navig-align">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#HOME">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ABOUT">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BOARD</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">RECRUITMENT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
<li class="nav-item">
<a id="donatebutton" class="nav-link" href="http://www.example.org" target="_blank">DONATE
<img class="donateimg" src="images/externallink.png" alt=""></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
If someone can look at my html and figure out a solution to for the script, I will be very grateful.
You dont appear to have an ancestor to the nav list with the class of "nav" - also the nav-link li's are what should get the 'active' class - not the 'a' within it.
Also - you can target the active item directly to remove the active class - whether its the li or the a.
if you want to keep the active class on the a - then just change the click handler
$(".nav-link").on("click", function(){
$(".nav-link.active").removeClass("active");
$(this).addClass("active");
});
If you want the active class on the li - then
if you want to keep the active class on the a - then just change the click handler
$(".nav-item").on("click", function(){
$(".nav-item.active).removeClass("active");
$(this).addClass("active");
});
You do not have a class .nav which you are referencing in your jQuery selector.
Update your jQuery too:
$(".nav-link").on("click", function(){
$(".nav-link.active").removeClass("active");
$(this).addClass("active");
});
Link to example: https://jsfiddle.net/Lb3u9c5d/
Related
I have a Jquery function which I use to set the 'active' class on my nav anchors, it uses the URL to do so. The function works for the most part but the problem is that when tab 1 is active it's also setting tabs 10, 11 and 12 as active too.
The code below is what I'm using and it's correctly outputting the page in the console.log, it also works as it should for all other links except Item 1 as seen in the screenshot.
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1 );
$('.nav-item a[href*="'+page+'"]').addClass('active');
console.log(page);
});
The nav is fairly large so I'll share a condensed version, just keep in mind that middle ul actually contains a total of 12 Items and each item shares the url
article.php?contentID=
After the = comes the item number from 1 to 12.
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<ul class="navbar-nav" >
<li><a class="navbar-brand" href="articles.php">Twist</a></li>
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link " href="article.php?contentID=1">Item 1</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="commentary.php">Commentary</a>
</li>
<li>
<a id="logLink" class="nav-link" href="logout.php">Log out</a>
</li>
</ul>
</div>
</nav>
Any help would be appreciated and I'm pretty sure it's something obvious but I'm just not seeing it.
Thanks in advance.
Twist
You are using the 'attribute contains' selector which selects any that have the given sub-string "article.php?contentID=1".
So this matches all of the following
"article.php?contentID=1",
"article.php?contentID=10",
"article.php?contentID=11",
"article.php?contentID=12", and
"some_article.php?contentID=1whatever"
Just remove the *
'.nav-item a[href="'+page+'"]'
Interesting question... The key was to have href$="='+page+'" so that the statement which adds the active class becomes:
$('.nav-item a[href$="=' + page + '"]').addClass('active');
Working snippet below - change the hardcoded value of page to test yourself:
$(function() {
var url = window.location.href;
var page = 1 //url.substr(url.lastIndexOf('/')+1 );
$('.nav-item a[href$="=' + page + '"]').addClass('active');
console.log('looking for page#:', page);
});
a.nav-link.active {
background: lightgreen;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
<h2>Nav</h2>
<p>Basic horizontal menu:</p>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#article.php?contentID=1">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#article.php?contentID=2">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#article.php?contentID=10">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#article.php?contentID=11">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#article.php?contentID=21">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
I have a main menu on my site using Bootstrap 4's navbar.
I also have another div (.social-navbar) with some additional menu items that I would like to MOVE from where they are and place INTO the Bootstrap menu on mobiles only. Basically when the menu collapses on mobile, I want the social-navbar items (facebook/twitter icons) and the LOGIN button to appear inside the navbar-nav menu from Bootstrap.
See Codepen Below...
https://codepen.io/anon/pen/KeXZJL
<div class="social-navbar clearfix">
<ul class="social-icons">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
</ul>
<ul class="login float-right">
<li class="join">Join Now</li>
</ul>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 4</a>
</li>
</ul>
</div>
</nav>
https://codepen.io/anon/pen/KeXZJL
Is this possible?
You can add this javascript at the very end of the BODY tag:
<script>
var x = window.matchMedia("(max-width: 465px)")
function mobileMenu(x) {
if (x.matches) {
document.getElementById("navbarMain").prepend(
document.querySelector(".social-navbar")
);
document.querySelector(".social-navbar").style.backgroundColor = "inherit";
} else{
document.querySelector("body").prepend(
document.querySelector(".social-navbar")
);
document.querySelector(".social-navbar").style.backgroundColor = "#000";
}
}
mobileMenu(x)
x.addListener(mobileMenu)
</script>
When the screen width is 465px or narrower .social-navbar will be moved into the navbar collapsed menu and its backgroundColor changes to match the collapsed menu.
Currently I am building a navigation bar using Bootstrap v4 and I found out that the animation during collapsing in responsive view is not right.
Hence, I inspect the specific navigation bar and I found out that the classes (.in and .show) are in the same elements when I toggle the collapsible content.
Is there any solution on it through JavaScript or by overriding CSS?
For your information, here are the inspection of my navigation bar.
https://i.imgur.com/f4R48gv.jpg
TQ.
EDIT :
<nav class="navbar navbar-expand-sm navbar-dark bg-dark top-nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainmenu">
<ul class="navbar-nav mr-auto">
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 1</a></li>
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 2</a></li>
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 3</a></li>
</ul>
<div class="navbar-nav">
<a class="nav-item nav-link px-3" href="#">SIGN IN</a>
<div class="divider"></div>
<a class="nav-item nav-link px-3" href="#">SIGN UP</a>
</div>
</div>
</nav>
Here are the jsfiddle link to the file.
https://jsfiddle.net/Jeffrey_Teoh/4y6n6xt4/11/
you are including bootstrap version 3 on top of your file and bootstrap version 4 at the end of your file... same with jQuery. Scripts should be added only once.
I am new here and forgive me if this question has already been asked before, but I couldn't find that kind of problem. And at the beginning, sorry for my grammar ;) .
The thing is, that I would like to get toggle menu that slides in from right side, after a click on the "hamburger" icon, but only when the width of the screen is smaller than 576 px. On larger screens, i have a fixed-top navbar, without any effects and that's fine. I am using Bootstrap 4 to build my site. Is it possible to do?
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand pl-md-4" href="index.html">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
<ul class="navbar-nav pr-md-4">
<li class="nav-item px-md-3">
<a class="nav-link" href="#">link 5</a>
</li>
<li class="nav-item px-md-3">
<a class="nav-link" href="#">link 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link 7</a>
</li>
</ul>
</div>
</div>
</nav>
Best way to do it is create two different navs one for the Bigger screens and one more for smaller screens.And give different functionality based on the ID through JS
<!-- Hide the for large Screen -->
<nav id="jsIdentifer1" class="hidden-md hidden-lg">
your navigation code
</nav>
<!-- Hide the for small Screen -->
<nav id="jsIdentifer2" class="hidden-sm hidden-xs">
your navigation code
</nav>
I use navigation from bootstrap and a little PHP to make it modular. I used jQuery to add an "active" CSS class on the client-side.
I want to add active class to "The Plan" "Nominees" "News" "FAQs" and "Contact" when they are active and don't do anything on "Vote Now" and "The Homepage".
jQuery(document).ready(function($){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,''));
$('#menu_list li a').each(function(){
if(urlRegExp.test(this.href)){
$(this).addClass('active');
}
// I added this for removing the active class from all the nav items on home page (which is the logo)
else if (url == ''){
$('#menu_list li a').removeClass('active');
}
});
})
And here is my header.php
<header>
<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav" id="menu_list">
<li><a class="nav-item nav-link" href="the_plan.php">The Plan</a></li>
<li><a class="nav-item nav-link" href="nominees.php">Nominees</a></li>
<li><a class="nav-item nav-link" href="news.php">News</a></li>
<li class="logo_container">
<a class="navbar-brand" href="/"><img src="assets/images/point_north_logo.png"><span class="sr-only">(current)</span></a>
</li>
<li><a class="nav-item nav-link" href="faqs.php">FAQs</a></li>
<li><a class="nav-item nav-link" href="contact.php">Contact</a></li>
<li><button class="btn_vote">Vote Now!</button></li>
</div>
</div>
</nav>
</header>
The issue is when I'm on the Home page, this code adds active to all the links. What I'm trying to achieve is when I'm Home Page, I don't want to add any classes to other links. The code I found is looking for href to highlight I believe, and if it can't find it. It highlights all of them with adding active class to all.
I don't have JSfiddle for this because since script looking for hyperlinks with a clear destination. fiddle didn't work for some reason. If somebody can help me with this that would be great, however, if you need a staging I can try to set something up.