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

Source Code:
-------------------------------------------------------------------

🔔 Subscribe Now!

Related Videos:
Animated Navigation Menu Bar using HTML CSS | Animated Tabs with Indicator

Animated Navigation Bar in HTML and CSS | Menu Hover Animation Effects

CSS Underline Animation Navbar | CSS Navigation Menu Bar

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 then the user can navigate back to previous sections via the back button.

[coders-rabbi]

perfectly working. This is an amazing video.😘

[surajramani]

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. 🇧🇷

[jaimecadenas]

Muchas gracias, por compartir... comprendido

[excorific]

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

[ICARO]

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

[maharshi]

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

[youtubechannel]

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?

[DLXXXI]

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

[the_sahil_patil]

Can we do this using php instead of js?

[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.🥳

[olxoujr]

Yo, I could see it working but the .active part is not really working ( I am using react), any solutions? I tried looking up and I feel the possible reason is the `.classList` being used. can anyone help me out??

[rznxxnt]

Mine doesn't work at all with the scroll-behavior: smooth function, does anyone know why?

[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?

[ikiruu]

@Codehal the onscroll and scrollY doesnt work...

[kenbadiola]

just do on the css do this for easy code
*{
scroll-behavior: smooth;
}
its done it works just like in the video

[colommbiano]

How can you do the same but using react?