i want to when scrolling it makes an active link one only active link and the others remove active ,the navbar is fixed, when it is active the link add class and the class name is active and when one link is clicked the other links should be unactive (remove class active) but it dosn't work , when i scroll down all the links are active please help
my active class css
.block{
height: 1200px;
}
.block:first-of-type{
margin-top: 1200px;
}
.navbar{
position: fixed !important;
top: 0;
width: 100%;
}
.active{
color: #000000 !important;
}
my navbar and body
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#action">action</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#method">method</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li ><a class="dropdown-item" href="#">Something else here</a></li>
<li ><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<ul>
<li class="block" class="block" id="services">services</li>
<li class="block" class="block" id="action">action</li>
<li class="block" class="block" id="method">method</li>
</ul>
my jquery code
$(document).ready(function(){
// Add active class on navbar link and remove from siblings
"use strict";
$(window).scroll(function(){
$('.block').each(function(){
if($(window).scrollTop() > $(this).offset().top){
// console.log($(this).attr('id'));
var blockId = $(this).attr('id');
$('a.nav-link[href^="#' +blockId+'"]').addClass('active');
$('.nav-link').removeClass('active');
}
});
});
});
You are immediately removing the active class from all links after you set the currently active one. You need to remove the active class from all the other links first, then apply the new one.
Swap the order of these lines:
$('a.nav-link[href^="#' +blockId+'"]').addClass('active');
$('.navbar a').removeClass('active');
Becomes:
$('.navbar a').removeClass('active');
$('a.nav-link[href^="#' +blockId+'"]').addClass('active');
The editor here struggled with your layout, so here's a codepen showing the above: https://codepen.io/29b6/pen/ZErMGpJ?editors=1111
This works fine, but bear in mind that listening to scroll events is quite an inefficient solution, especially as you're just looping over a bunch of DOM elements each time. You might want to read up about the Intersection Observer API for a more passive approach.
Related
i am beginner so I am trying to make a website for just learning the language that was been used is Javascript and faced this problem that dropdown menu hiding behind cards and the filter, any one faced the same problem ? and this is the pics
any help ?
enter image description here
.dropdown-toggle {
cursor: pointer;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<ng-template #anonymousUser>
<li *ngIf="auth.user" class="nav-item">
<a class="nav-link" href="login">login</a>
</li>
</ng-template>
<li
*ngIf="auth.user | async as user; else anonymousUser"
ngbDropdown
class="nav-item dropdown"
>
<a
ngbDropdownToggle
class="nav-link dropdown-toggle"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
{{ user.displayName }}
</a>
<ul
ngbDropdownMenu
class="dropdown-menu"
aria-labelledby="navbarDropdown"
>
<li>
<a
class="dropdown-item"
href="dashboard"
aria-labelledby="dropdownMenuButton"
>Dashboard</a
>
</li>
<li>
<a class="dropdown-item" routerLink="admin/products">Products</a>
</li>
<li>
<a class="dropdown-item" routerLink="admin/publish">publish</a>
</li>
<li>
<a (click)="logout()" class="dropdown-item" href="home">logout</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Try increasing the z-index of the dropdown-menu
Like this,
.dropdown-menu{
z-index: 2000 !important;
}
You are facing this issue due to z-index. If you want to display the drop-down menu at the front then you can increase it's z-index so that it won't hide behind any cards. Make sure that z-index is greater than any other element which might hide the drop-down menu. You can read more about it here.
I'm having trouble making the background of the following navbar transparent. I've tried making background-color: transparent !important; for .navbar but that doesn't seem to work either.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarnavdropdown" aria-controls="navbarnavdropdown" aria-expanded="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarnavdropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html"><img src="assets/img/resultheap-logo.png" alt="" /></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog/index.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact-form/index.html">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardropdownmenulink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbardropdownmenulink">
<a class="dropdown-item" href="#">action</a>
<a class="dropdown-item" href="#">another action</a>
<a class="dropdown-item" href="#">something else here</a>
</div>
</li>
</ul>
</div>
</nav>
remove the bg-light class from the nav element, or override it inline or id with important. But the cleanest way is to remove simply the class. I think you could simply not override it because bootsstrap sets the color with the bg-light class also with !important.
I don't believe you may have mentioned it but have you tried the the 'opacity' css.
You can do:
opacity: 0; //Makes fully transparent
opacity: 0.5; //Half transparent
opacity 1; //No transparency
Hopefully this helps for the navbar. Let me know if it doesn't, i'll try and help in any way possible.
You can add a new css class as background-color: transparent; or you can change property of ".bg-light" class.
.bg-light {background-color:Transparent!important}
What I need is a smooth hover effect for my dropdown menu.
$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500); is not working for me. When the mouse out hover, the effect isn't working.
$(document).ready(function () {
// executes when HTML-Document is loaded and DOM is ready
// breakpoint and up
$(window).resize(function () {
if ($(window).width() >= 980) {
// when you hover a toggle show its dropdown menu
$(".navbar .dropdown-toggle").hover(function () {
$(this).parent().toggleClass("show");
$(this).parent().find(".dropdown-menu").toggleClass("show");
$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);
});
// hide the menu when the mouse leaves the dropdown
$(".navbar .dropdown-menu").mouseleave(function () {
$(this).removeClass("show");
});
// do something here
}
});
// document ready
//wow.js init
new WOW().init();
});
Here is my HTML markup. I am using bootstrap 4 latest version. what can I do with a smooth hover effect with jQuery or javascript
<header class="header_area">
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="#">Light House</a>
<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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="single.html">Single Post</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pages
</a>
<div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
<a class="dropdown-item" href="#">Item 4</a>
<a class="dropdown-item" href="#">Item 5</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pages
</a>
<div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact_us.html">Contact Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0 search_icon" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</nav>
</header>
.hover() has two handlers. The mouse IN and the mouse OUT.
If you wish to define something to happen on mouse out, you have to define the handler.
element.hover(mouseenter, mouseleave);
Documentation
So I suggest:
$(".navbar .dropdown-toggle").hover(
// Mouseenter event handler
function () {
$(this).parent().toggleClass("show");
$(this).parent().find(".dropdown-menu").toggleClass("show");
},
// Mouseleave event handler
function(){
$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);
}
);
If you wish to use .hover(), this can be done like so:
$(".navbar .navbar-toggler").hover(function(e) {
$(".navbar .navbar-collapse").addClass("show").fadeIn(500);
}, function(e) {
$(".navbar .navbar-collapse").removeClass("show").fadeOut(500);
});
This has drawbacks as as soon as you move the mouse to click or select one of the Menu items, it will revert the class and become hidden.
I would advise staying with .click() for all cases. This will work for Mobile and Desktop browsers:
$(".navbar .navbar-toggler").click(function() {
$(".navbar .navbar-collapse").toggleClass("collapse show");
});
Working Example: https://jsfiddle.net/4gas2aok/4/
If you want to retain the fade, use .fadeToggle():
$(".navbar .navbar-toggler").click(function() {
$dropdown.fadeToggle(500).toggleClass("collapse show");
});
Bootstrap CSS addresses a lot of the width issues already, so you should not need to check the Window width, just let bootstrap handle it on it's own.
Full Example: https://jsfiddle.net/4gas2aok/7/
I'm trying to figure out how to have a top navbar in bootstrap 4 and then when the user scrolls down a little on the page have the navbar fade in I can currently get the navbar to show up using the below script, however, it doesn't fade in it just immediately shows up very fast and awkwardly.
<script>
$(document).scroll(function(e){
var scrollTop = $(document).scrollTop();
if(scrollTop > 200){
$('.navbar').removeClass('static-top').addClass('fixed-top');
} else {
$('.navbar').removeClass('fixed-top').addClass('static-top');
}
});
</script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav><!--./nav-->
I'm looking for a navbar effect like this http://bootstraplovers.com/assan-v3.6/classic-template/html/index.html
$('.navbar').removeClass('static-top').addClass('fixed-top');
before calling .removeClass() you need to call .toggle() or other similar jquery effects. Refer to the documentation
.toggle() would hide the navbar, so maybe you want to post your question in the relevant stackoverflow section (jquery), think about how you want to build this animation and search the jquery documentation...
Im am working on this site right now: https://handyfreak011.github.io/FreetimeElements/.
I already set
body { position: relative;}
And applied
<body id="home" data-spy="scroll" data-target="#main-nav" data-offset="150">
To my body.
That is my nav:
<nav class="navbar main-nav" id="main-nav">
<div class="container">
<button class="navbar-toggler hidden-sm-up " type="button" data-toggle="collapse" data-target="#navibar" aria-controls="navibar" aria-expanded="false" aria-label="Toggle navigation">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="navibar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#info">START</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#philo">PHILOSOPHIE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#products">PRODUKTE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">KONTAKT</a>
</li>
</ul>
</div>
</div>
</nav>
The ID's of the elements are as in the navigation and if you klick them in the nav, you are sent there. But scrollspy isn't working, the navbar's elements don't change to active when you scroll in the area.
Thanks for you help!