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

Подписаться 158 тыс.

Просмотров 122 тыс.

50% 1

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.

Опубликовано:

25 мар 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 52

@delmontee 6 месяцев назад

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.

@SilakhulMufid 7 месяцев назад

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

@alinagrinmn 11 месяцев назад

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

@coders-rabbi 11 месяцев назад

perfectly working. This is an amazing video.😘

@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.

@solongdygaming4729 6 месяцев назад

You're very good at explaining

@surajramani5279 9 месяцев назад

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

@souvik_745 13 дней назад

It helped a lot. Thank you so much 😊

@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

@user-lb6ez4ul9y 3 месяца назад

Many many thanks brother❤❤❤❤❤❤

@jaimecadenas8495 Год назад

Muchas gracias, por compartir... comprendido

@allahmacedo1993 9 месяцев назад

Obrigado , me ajudou bastante .

@abdullahjama8404 3 месяца назад

thanks appreciate the help.

@sange7512 Год назад

This is what I find thanks

@ICARO7 Год назад

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

@DLXXXI 2 месяца назад

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

@maharshi5555 9 месяцев назад

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

@abhishekdubalgonde 10 месяцев назад

😇cool thank you soooo much

@ayouby12 Год назад

Thank you

@youtubechannel548 3 месяца назад

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?

@WawanSetiawan-sh8kv 10 месяцев назад

This amazing

@pagalpk Год назад

Lovely song in starting

@the_sahil_patil Год назад

Can we do this using php instead of js?

@eothay Год назад

Responsivo, responsive?

@Kau_Ram Год назад

Lots of love bro

@codehal Год назад

Thanks awfully!

@MansiChovatiya 7 месяцев назад

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

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

@Nimurasa 6 месяцев назад

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 4 месяца назад

Same

@amitsevda4723 Год назад

Amazing work❤❤❤

@codehal Год назад

Thank you 💚

@Argylleagen 7 месяцев назад

The logic starts @ 6:30

@reatasu 4 месяца назад

can I use this in my website?

@ikiruu4333 2 месяца назад

@Codehal the onscroll and scrollY doesnt work...

@colommbiano 18 дней назад

How can you do the same but using react?

@aman12988 10 месяцев назад

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