How to Create an Active Nav Link on Scroll using HTML CSS and Javascript | Active Menu Class

How to Create an Active Nav Link on Scroll using HTML CSS and Javascript, Active Menu Class Javascript, Navbar Active on Scroll Javascript, Active Navbar Javascript, How to Make Active Navbar in HTML
Click For More: / @codehal
Source Code:
codehalweb.com/
-------------------------------------------------------------------
🔔 Subscribe Now!
/ @codehal
Related Videos:
Animated Navigation Menu Bar using HTML CSS | Animated Tabs with Indicator
• Animated Navigation Me...
Animated Navigation Bar in HTML and CSS | Menu Hover Animation Effects
• Animated Navigation Ba...
CSS Underline Animation Navbar | CSS Navigation Menu Bar
• CSS Underline Animatio...
Codehal
-------------------------------------------------------------------
#css #cssanimation #csseffect #codehal
-------------------------------------------------------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.

[@SilakhulMufid]

I finally found what I was looking for.... Thanks dude

[@alinagrinmn]

Thank you for the great video! Have been looking for a right and smooth solution for a couple of days.

[@delmontee]

Great article, thanks. If you want to have the URL hashtag update as you cycle through, add something like " linkid='X' " to each a href, then add an onclick event to each link, where the parent.location.hash changes to the whatever the linkid attribute is . If you want to then add that in to the url's page history, use window.history.pushState(..... then the user can navigate back to previous sections via the back button.

[@coders-rabbi]

perfectly working. This is an amazing video.😘

[@surajramani5279]

it's a very helpfull for me....Thanks 👍

[@DiogoLScarmagnani]

Your channel is a piece of cake! Thank you for too many things you're sharing with us, I'm learning a lot! My best regards from Brazil. 🇧🇷

[@codehal]

Glad to help 💚

[@williamoliveira8123]

Que legal encontrar outros brasileiros que gostam desse canal.

[@excorific2205]

Amazing work. Simple yet impactful and full of knowledge. Thank you so much I need to leave a comment expressing my gratitude.

[@codehal]

Thank you! That's absolutely fine

[@allahmacedo1993]

Obrigado , me ajudou bastante .

[@maharshi5555]

If I put "top >= offset - 98 (height of header), then only it is perfectly working with complete scroll to the section...Any suggestion?

[@solongdygaming4729]

You're very good at explaining

[@user-lb6ez4ul9y]

Many many thanks brother❤❤❤❤❤❤

[@jaimecadenas8495]

Muchas gracias, por compartir... comprendido

[@abdullahjama8404]

thanks appreciate the help.

[@DLXXXI]

Do i need to use section or can i use div to

[@sange7512]

This is what I find thanks

[@WawanSetiawan-sh8kv]

This amazing

[@ICARO7]

Muito boa a explicação 😊✌️ Deus abençoe!

[@ayouby12]

Thank you

[@abhishekdubalgonde]

😇cool thank you soooo much

[@pagalpk]

Lovely song in starting

[@milanigp]

This is great video works absolutely fine. But there is one more issue. When I click on the nav link, the page scrolls to top of the page, and my page is hiding under the navbar. So content of the page hides by header. How can we add the header offset so clicking on the nav link scrolls to just after the header? Can anyone have this problem and can suggest what we can do for this?

[@youtubechannel548]

Cool, but what if all sections are not 100vh? If all sections are 100vh it's easy, but what do you do if they are not?

[@the_sahil_patil]

Can we do this using php instead of js?

[@aman12988]

Brother, " *window.onscroll* " property is not working. I had to use " *window.addEventListener("scroll" , )* " instead to make it work..
But I still couldn't figure out why * .onscroll* didn't work, can you please tell why it didn't work, has it gone deprecated or something, or any other issue..??

[@zaindevs]

Yoe have to use window.scrollY ...

[@MansiChovatiya]

I wanted to express my sincere gratitude for the invaluable knowledge and insights I've gained from you. Your guidance has been instrumental in my growth, and I deeply appreciate the opportunity to learn from your expertise.🥳

[@Nimurasa]

When I try to write the code you have writed in this video, when I reach the JavaScript where you add the active and section in document.querySelectorAll, I have added the entire JavaScript code, but the active button won't toggle when I view different sections.

[@pictor4690]

Same

[@ikiruu4333]

@Codehal the onscroll and scrollY doesnt work...

[@Kau_Ram]

Lots of love bro

[@codehal]

Thanks awfully!

[@colommbiano]

How can you do the same but using react?

[@eothay]

Responsivo, responsive?

[@Argylleagen]

The logic starts @ 6:30

[@amitsevda4723]

Amazing work❤❤❤

[@codehal]

Thank you 💚

[@reatasu]

can I use this in my website?

[@Light---Yagami]

[@oct-zt2hk]

This was single page website but if we have multi page website how make active link in that case ???

[@Garden_of_Words.]

Pretty sure you can do:
a:is(:link, :active, :visited).active { color: white; background-color: black;}

[@vedad_1335]

I didnt apply java script and its stilll working hmm

[@kira3821]

it works for the first 5 section, but it doesnt work on the last lmao

[@cezar5875]

0:16 how to make this effect when double click on the text

[@baazigar5]

by pseudo element ===>
::selection{
}

[@user-ou7on2os6n]

@aman12988
@aman12988
1 month ago
Brother, " window.onscroll " property is not working

[@zaindevs]

bro use window.scrollY property ... it works

[@ikiruu4333]

window.scrollY doesn't work either