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
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 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>
I have a navbar which I want to navigate through only next and back buttons, clicking directly on tabs must be restricted. Below is my code which I tried but they are not working as expected,
<nav class="navbar navbar-expand-lg">
<div class="navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link mr-5" [ngClass]="href == '/expert-welcome/expert-profile'? '': 'disabled'" [routerLink]="['/expert-welcome/expert-profile']" [routerLinkActive]="['is-active']">
<b class="circularBold">Profile Details</b>
</a>
</li>
<li class="nav-item">
<a class="nav-link mr-5" [routerLink]="['/expert-welcome/expert-education']" [routerLinkActive]="['is-active']">
<b class="circularBold">Education & Experience</b>
</a>
</li>
<li class="nav-item">
<a class="nav-link mr-5">
<b class="circularBold">Services Offerings</b>
</a>
</li>
<li class="nav-item">
<a class="nav-link mr-5">
<b class="circularBold">Availability & Fees</b>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<b class="circularBold">Listing Details</b>
</a>
</li>
</ul>
</div>
</nav>
CSS
.disabled{
pointer-events: none;
}
With this approach, it's working partially, when I navigate through back and next buttons, the route is loading but the value isn't getting patched, I'll have to reload the page for the new value to get patched.
In approach 2, I have removed routerLink and routerLinkActive, but I want to show a different css for an active tab as below.
Better solution or suggestions are much appreciated.
Thanks in advance.
<a routerLink="/your/path"><span (click)="preventRloute($event)">Test link</span></a>
and writ a function
function preventRloute($event: MouseEvent) {
if (condition) {
$event.stopPropagation();
// your code...
return;
}
// navigates
}
I have the script to create a navbar,
its only can make dropdown menu opened only when it hovered, the problem is when this accessed by mobile browser, dropdown menu cannot open, how to modify this script in order to make dropdown menu open when clicked the parent menu
<div class="collapse navbar-collapse offset w-100" id="navbarSupportedContent">
<div class="row w-100 mr-0">
<div class="col-lg-7 pr-0">
<ul class="nav navbar-nav center_nav pull-right">
<li class="nav-item ">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Paket</a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="category.html">Pestgre</a>
</li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="single-blog.html">Blog Details</a>
</li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="tracking.html">Tracking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="elements.html">Elements</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</div>
For a mobile version, I would use a hamburger menu (the three lines if you didn't know). You can find the icon or make it your self. In javascript or jquery, say
const getMenu = document.getElementById("menuButtonsId"); //be sure to call this code after after the document has loaded, or else javascript won't find the button or icon.
getMenu.onclick(function(){
if (the menu is closed) {
open the menu
} else {
close the menu
}
})
I don't know much about jquery, but I think you can do something like this
$("#menuButtonsId").click(function() {
if (the menu is closed) {
open the menu
} else {
close the menu
}
})
Just fill out the place holder text that I put in the code. I hoped that answered your question!
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;
}