I want to make my current page active when user click on the nav bar .
I tried alot but fail to do so,
Please Correct me, ignore grammar mistake
I want if user click on about us , about us should be active and vice versa.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container"> <a class="navbar-brand" href="/">CMS</a>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item " id="home">
<a class="nav-link active" href="/">Home</a>
</li>
<li class="nav-item" id="admin">
<a class="nav-link" href="/admin">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Try this syntax.
.navbar-nav .nav-item a:active {
color: #color-code;
}
.navbar-nav .nav-item a:focus {
color: #color-code;
}
Related
I have created with navbar, I haven't done much web development.
<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> <span class="navbar-toggler-icon"></span> </button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item"><a class="nav-link" href="index.html"><strong style="text-transform:uppercase">home</strong></a></li>
<li class="nav-item"><a class="nav-link" href="about.html"><strong style="text-transform:uppercase">about</strong></a></li>
<li class="nav-item"><a class="nav-link" href="flights.html"><strong>FLIGHTS</strong></a></li>
<li class="nav-item"><a class="nav-link" href="hotels.html"><strong>HOTELS</strong></a></li>
<li class="nav-item"><a class="nav-link" href="holidays.html"><strong>HOLIDAYS</strong></a></li>
<li class="nav-item "><a class="nav-link" href="property.html"><strong>PROPERTY</strong></a></li>
<li class="nav-item active"><a class="nav-link" href="car_hire.html"><strong>CAR HIRE</strong></a></li>
</ul>
</div>
</nav>
This navbar is linked to at the top of all other pages to reduce repetition of code. Can someone help me with code so when menu item clicked "active" class is added to li element. This then triggers css.
CSS:
.nav-link.active {
color: white;
}
Thank you
Here is the exact complete code for your requirement in pure JavaScript. Hope it will help
const links = document.querySelectorAll('.nav-link');
if (links.length) {
links.forEach((link) => {
link.addEventListener('click', (e) => {
links.forEach((link) => {
link.classList.remove('active');
});
e.preventDefault();
link.classList.add('active');
});
});
}
.nav-link.active {
color: white;
}
<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
<button
class="navbar-toggler ml-1"
type="button"
data-toggle="collapse"
data-target="#collapsingNavbar2"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="navbar-collapse collapse justify-content-between align-items-center w-100"
id="collapsingNavbar2"
>
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="index.html">
<strong style="text-transform: uppercase">home</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">
<strong style="text-transform: uppercase">about</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flights.html">
<strong>FLIGHTS</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="hotels.html">
<strong>HOTELS</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="holidays.html">
<strong>HOLIDAYS</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="property.html">
<strong>PROPERTY</strong>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="car_hire.html">
<strong>CAR HIRE</strong>
</a>
</li>
</ul>
</div>
</nav>
Use classList and toggle
document.querySelectorAll(".nav-item").forEach((ele) =>
ele.addEventListener("click", function (event) {
event.preventDefault();
document
.querySelectorAll(".nav-item")
.forEach((ele) => ele.classList.remove("active"));
this.classList.add("active")
})
);
.active {
color: green;
}
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">home</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">about</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong>FLIGHTS</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong>HOTELS</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong>HOLIDAYS</strong></a></li>
<li class="nav-item "><a class="nav-link" ><strong>PROPERTY</strong></a></li>
<li class="nav-item active"><a class="nav-link" ><strong>CAR HIRE</strong></a></li>
</ul>
All you have to do is loop through the links, check if the current clicked link is the same as the current page, then set the active class and aria-current to that item.
Add this code to your javascript
document.querySelectorAll(".nav-link").forEach((link) => {
if (link.href === window.location.href) {
link.classList.add("active");
link.setAttribute("aria-current", "page");
}
});
Add following code in your JS:
$(".nav-item").click(function() {
$(".nav-item").removeClass("active"); // This will remove active classes from all <li> tags
$(this).addClass("active"); // This will add active class in clicked <li>
});
I have a navigation bar with links that lead to different parts to my Webpage, I want it so that in JavaScript I make a command and the link will be pressed and the webpage will be changed.
My Navigation Bar
// Current JavaScript Method (Not Working)
document.getElementById("section2Button").click();
<nav class="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center fixed-top">
<ul class="navbar-nav">
<li id="section1Button" class="nav-item">
<a class="nav-link" href="#section1">Colleges</a>
</li>
<li id="section2Button" class="nav-item">
<a class="nav-link" href="#section2">College Selected</a>
</li>
<li id="section3Button" class="nav-item">
<a class="nav-link" href="#section3">About Me</a>
</li>
</ul>
</nav>
document.querySelector("#section2Button a").click();
You need to query to a tag. And you can put it into any function you want to execute. For example, I put this action into a button.
You can see full demo here.
function your_command() {
// Fixed query
document.querySelector("#section2Button a").click();
}
<button onclick="your_command()">Test command</button>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center fixed-top">
<ul class="navbar-nav">
<li id="section1Button" class="nav-item">
<a class="nav-link" href="#section1">Colleges</a>
</li>
<li id="section2Button" class="nav-item">
<a class="nav-link" href="#section2">College Selected</a>
</li>
<li id="section3Button" class="nav-item">
<a class="nav-link" href="#section3">About Me</a>
</li>
</ul>
</nav>
<h2 id="section1">Section 1</h2>
<h2 id="section2" style="margin-top: 100px">Section 2</h2>
<h2 id="section3" style="margin-top: 100px">Section 3</h2>
You need to add an Event Listener.
var htmlElement = document.getElementById("section2Button");
htmlElement.addEventListener('click', function() {
console.log('clicked');
});
see demo
var htmlElement = document.getElementById("section2Button");
htmlElement.addEventListener('click', function() {
console.log('clicked');
});
<nav class="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center fixed-top">
<ul class="navbar-nav">
<li id="section1Button" class="nav-item">
<a class="nav-link" href="#section1">Colleges</a>
</li>
<li id="section2Button" class="nav-item">
<a class="nav-link" href="#section2">College Selected</a>
</li>
<li id="section3Button" class="nav-item">
<a class="nav-link" href="#section3">About Me</a>
</li>
</ul>
</nav>
I want to change active link color after click.
When I'm on START link I want have START writing in another color etc.
I have few links = "#" beacuse I haven't done it yet but my code works only in these cases, f.ex: when I click "O HODOWLI" then START is in another color as earlier, but "O HODOWLI" should be.
When I click "KOCIĘTA" then this writing is in another color as it should be. So when I have "#" it works but should in all cases.
js:
$(document).ready(function () {
$("ul.navbar-nav > li").click(function (e) {
$("ul.navbar-nav > li").removeClass("active");
$(this).addClass("active");}) });
html:
<nav class="navbar navbar-expand-xl navbar-light ">
<button class="navbar-toggler small-screen-navbar" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/start"> START </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/o_hodowli"> O HODOWLI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> KOCIĘTA </a>
</li>
<li class="nav-item">
<a class="nav-link " href="#"> NASZE KOTY </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/opieka"> OPIEKA NAD KOTAMI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OPINIE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kontakt"> KONTAKT </a>
</li>
</ul>
<ul class="navbar-nav sm-icons">
<li class="nav-item"><a class="nav-link" href="https://www.facebook.com/11891824050249/">
<i class="fab fa-facebook-square icon"></i></a>
</li>
</ul>
</div>
Maybe you can try with plain js:
const links = document.querySelectorAll('.nav-link')
links.forEach(link => {
link.addEventListener('click', (e) => {
links.forEach(link => link.classList.remove('active'))
e.target.classList.add('active')
})
})
.active {
color: red;
}
<nav class="navbar navbar-expand-xl navbar-light ">
<button class="navbar-toggler small-screen-navbar" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link active" href="/start"> START </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/o_hodowli"> O HODOWLI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> KOCIĘTA </a>
</li>
<li class="nav-item">
<a class="nav-link " href="#"> NASZE KOTY </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/opieka"> OPIEKA NAD KOTAMI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OPINIE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kontakt"> KONTAKT </a>
</li>
</ul>
<ul class="navbar-nav sm-icons">
<li class="nav-item"><a class="nav-link" href="https://www.facebook.com/11891824050249/">
<i class="fab fa-facebook-square icon"></i></a>
</li>
</ul>
</div>
I have a JQuery code that adds a nav-link dynamicly to a nav-item. The problem is this nav-link doesn't change to active when clicked. I tried to dynamicly give it the active class but it doesn't take it. it seems after the page reloads everything is rest and it's always the first nav-link that takes the active class.
It's of course wrapped inside $(document).read(). I also tried to wrap it inside $(window).load() but same problem.
$('#A').append('<li class="nav-item">' + '<a class="nav-link" href="{{dynamic_link}}?id=1" >Dynamicly Added</a>' + '</li>');
$(document).on('click', '.collapse li', function(e) {
$(this).addClass('active').siblings().removeClass('active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse mt-5 h-100 justify-content-between" id="navbarsExampleDefault">
<ul class="navbar-nav accordion" id="SideBar">
<li class="nav-item">
<a class="nav-link" href="{{index}}">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{list}}">list</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href data-toggle="collapse" data-target="#A" aria-controls="collapseOne"> A </a>
</li>
<ul class="collapse" id="A" data-parent="#SideBar">
<li class="nav-item">
<a class="nav-link" href="{{B}}">B</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{C}}">C</a>
</li>
</ul>
</div>
If you can spot the problem I'd appreciate your guidance.
Because elements that you are appending not exist when you define the the click handler better to use the delegate() method from jQuery.
$('#A').append(
'<li class="nav-item">'
+'<a class="nav-link" href="{{dynamic_link}}?id=1" >Dynamicly Added</a>'
+'</li>') ;
$('.collapse ').delegate('li','click',function(e) {
e.preventDefault();
$( this ).addClass( 'active' ).siblings().removeClass( 'active' );
});
.collapse li.active a{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse mt-5 h-100 justify-content-between" id="navbarsExampleDefault" >
<ul class="navbar-nav accordion" id="SideBar">
<li class="nav-item">
<a class="nav-link" href="{{index}}">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{list}}" >list</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href data-toggle="collapse" data-target="#A" aria-controls="collapseOne" > A </a>
</li>
<ul class="collapse" id="A" data-parent="#SideBar" >
<li class="nav-item">
<a class="nav-link" href="{{B}}" >B</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{C}}" >C</a>
</li>
</ul>
Problem:
How can I make my navigation not appear on my #home section. However, when the user scrolls down or clicks on the find more button. When the user gets to the 'features-icons' section how can I make my navigation bar appear for all sections including that and below? https://github.com/ldocherty1/Unit28_Assignment1
What I have tried:
HTML
<nav class="navbar scrolled-nav fixed-top navbar-expand-sm bg-light">
<a class="navbar-brand" href="#">Front End Web Developer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">☰</button>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#features-icons">Expectations</a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">Design</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
CSS
.navbar {
display: none;
}
JS
$("body, html").on("scroll", function() {
var features_top = $("#features-icon").position().top;
var top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$(".navbar").show();
} else {
$(".navbar").hide();
}
});
I believe it has something has to do with the JS part of my code the problem why my navbar isn't displaying.
Your navbar is not displaying because you never reach the point where the top_of_window >= features_top is valid.
I've updated the fiddle in the comment. Check it now https://jsfiddle.net/8o7omnm7/33/
Your navbar will be displayed only when the <div id="features-icon">Hola</div> will have -1px from top. As long as you don't have that it will not be displayed