Highlight Nav Menu on scroll with JavaScript

Many of you guys wanted to see a video on Highlighted nav menu. So here it is as you wanted. This is a really popular stuff that you might saw it in many website. Here when you scroll on web page, based on your scroll position the menu active item change dynamically. Today we are going make it with HTML, CSS and JavaScript.
Hope you will like it.
🔔subscribe and turn on the notification bell.
👉 source code: codepen.io/Web_Cifar/pen/LYRBbVE
Timestamps -
00:00 - Preview
01:57 - Layout(HTML/CSS)
10:42 - JavaScript
23:17 - Tutorial Conclusion
Follow Arfan 👇👇
Instagram: / shaifarfan08
Facebook: / shaifarfan08
🐱‍🏍 Support The Channel
Paypal : paypal.me/webcifar
▶ Also Watch :
Make a full website with HTML & CSS: • One Page Full Website ...
HTML & CSS Landing Page : • HTML & CSS Website Lan...
Mini Project for HTML & CSS : • Responsive Website Wit...
How To Make A WordPress website: • How To Make A Professi...
▶ Some useful Playlist :
HTML & CSS: • HTML & CSS
Vanilla JavaScript : • Vanilla JavaScript
Frontend Mentor Challenges: • Frontend Mentor Challe...
30days30submits Challenge: • 30days30submits
🌐 Join The Community :
Our website : webcifar.com/
Facebook Page : / webcifar
Facebook group : bit.ly/fb-group-webcifar
Instagram : / web_cifar
twitter : / webcifar
Github: github.com/WebCifar
#webcifar #highlightedMenu #javascript

[@AjSarco]

life saver tutorial , thanks man, I've been struggling how to highlight section on navbar, I'm almost done with my project and this is the only thing I'm stuck with.

[@ichigolei4637]

Just what I needed! I made minimalist navigation side bar, just lines to redirect my five sections, and was wondering how to change the background color when passing each section. thank you so much

[@skullnecroze]

The best tutorial about this on the web. Thanks very much for share this with us!

[@freddymoreno9300]

Great Great Great TUTORIAL! simple, concise, and intereting. Thank you! keep doing great stuff

[@gabrielfono844]

Thanks so much sir
I brought the same logic into the startup I am currently building with React.
I used useRef instead and everything is smooth.
thanks again
have a wonderful day and your family
love from Seattle Washington

[@simond.7448]

Thank you very much for this quick guide! It's awesome.

[@tusharkadian]

It is better to add class on tag instead of ?

[@tinghuang3218]

Great tutorial! This is perfect and helps me a lot. Thank you so much👍

[@JoshPalmeroc]

Great tutorial man! What I did take make it a little easier to maintain is instead of selecting all the li, I selected every "a" tag and got its href attribute then did a substring to remove the "#". Then i checked that against the "current" variable. that way you don't have to add classes to each li.
const navLi = document.querySelectorAll('.tabs__item a');
navLi.forEach(li => {
li.classList.remove('active');
const href = li.getAttribute('href').substring(1);
if (href === current) {
li.classList.add('active');
}
});

[@webcifar]

Great 👍

[@photoinshot1355]

Excellent video, brilliant tutor, he explains things really well, clear well presented video, thanks!

[@alexkelso1649]

thanks so much legend. Learned so much watching this.

[@photoinshot1355]

Brilliant tutorial, very helpful and very well explained and demonstrated, great code, great teacher, thanks!

[@mwmersal]

Wooooow! this was unbelievably helpful mate. Thanks ^^

[@webcifar]

Glad to hear it!

[@Matin1999_unique]

this tutorial is just perfect and what programmers are looking for. 👍

[@valeriyadolya8412]

Thank you very much, it helped me a lot!

[@guilhermehammes1516]

simple and functional! thanks for the great video

[@webcifar]

Thanks

[@chaipiyo]

thank you so much brother .. very well explained

[@ryukagai]

Exactly what I needed! Thank you :)

[@webcifar]

Glad it helped!

[@tszpang9917]

Thanks for the tutorial! Worked for my project :D

[@webcifar]

Glad it helped!

[@nimi_nomo]

Thanks so much. Helped a lot

[@user-gw3yd8ev6p]

Thanks for tutorial, it's very useful!

[@kese1135]

Thank you so much! You're the best!

[@webcifar]

You are welcome ❤️

[@alphamx13]

Great tutorial, thank you!

[@paalaleksander]

Thanks for this! Helped me a lot!

[@webcifar]

Glad it helped!

[@kunalpatil1250]

thanks man i implemented this in react

[@__-qp9dl]

당신은 천재입니다.
감사합니다 !

[@shaaa00]

Thank you for sharing this tutorial, it really helped me

[@webcifar]

Glad to hear that!

[@istiakahammad7074]

Finally i got it.
Thanks

[@jmcoxD]

Excellent tutorial!

[@esmailkhalifa3984]

I have been looking for it for three days😶
Finally ❤️🙂

[@webcifar]

♥

[@guxsta3217]

Thank you so much!! Amazing video

[@selah_2215]

Thank you very much! Your tutorial helped me a lot. At first I was kinda struggling troubleshooting, but it was the most fun part. It was worth it. ;> Really really thank u 🙏

[@webcifar]

Glad it helped!

[@_4zad]

Great vid, learned a lot!

[@thanhannguyen2565]

It is extremely easy to understand.

[@abdulraffy5398]

Nailed It!

[@selsen9011]

i have the problem that my sectiontop does not show, when i type "console.log".
my Sections are all diffrent in height.
the console.log on sections worked, so it knows where the sections are, but cant figure the offsetTop out.. Do you know why that is?

[@havefun5519]

Thanks, this is what I want

[@MrTomequ]

Cool video, thanks. Small suggestion. If you set the value of current on 'home' (current = 'home') instead an empty string, than you'll have button-background on Home at the beginning and when you click again Home as well. Gr.

[@webcifar]

That’s great 👍

[@gaurishnaik8288]

Thankyou this helped ne

[@richardshaju]

Thank you so much 💝🥰

[@alamineuropeanit583]

thanks. I like this tips

[@rosehope5376]

Thank you really it was a good one ..

[@webcifar]

Glad you liked it!

[@kennyakins3536]

This really helped a lot 👏

[@webcifar]

Glad it was helpful.

[@LordzChilight]

thank you, learn a lot :D 🙏

[@dustinbest1326]

Nice video! Thank you!

[@sandeepsv3514]

thanks thank you so much for the video it means a lot

[@webcifar]

Glad it helped

[@patricioscida3949]

Great video, thank you so much.

[@webcifar]

You're very welcome!

[@raomudasir4509]

really awesome bro

[@liluo7790]

thank you so much ! thank you so much man

[@webcifar]

You're welcome!

[@duvvadasaibhargav9879]

Thanks for your tutorial learned a lot

[@webcifar]

Glad to hear that!

[@eddi3ms]

very helpfull, thanks alot !!

[@thangphan6047]

Thank you so much :)

[@marekgacek2034]

awesome, thx man

[@ujjalzaman2722]

thank you so much for this one.

[@webcifar]

You're very welcome!

[@a.j9157]

Great video man keep up !

[@webcifar]

Thanks, you too!

[@osman1110]

hi how would you make it diff colours for each section?

[@sairaghava6111]

This implementation is breaking when I change the screen resolution, can you help here

[@ankitkumarravidas6062]

yu are my life save bro thanks

[@dibanpitchaimuthu9336]

Great vid, just one error I noticed you forgotten 's' at 10:04 for transition

[@giovannimichel5506]

Thank you for the intel

[@harshilparmar9076]

Thanks bro!!

[@omarfarouk2080]

Thank you bro!

[@MrWebDesignerAnas]

thank you sir it was really helpful

[@webcifar]

Glad it helped

[@romuloalves9349]

Ótimo vídeo parabéns 👏.

[@webcifar]

Obrigado

[@andreydario26]

puta video

[@ankitraj5ar]

very useful !!!!!!

[@r18570]

thank you bro

[@siawonderswhy]

very helpful thank you

[@webcifar]

Glad it was helpful!

[@MohamedMedhat-ic5ng]

thank you

[@mariyanesvyetaylo6264]

Hello, thank you so much for this video - very helpful!
I wonder if you can help me : I want to add .scrollIntoView({ behavior: 'smooth', inline: "start" }) when clicked on nav item(so the correspondant section scrolls smoothly into view), but can't figure out how to get the "section" id to match li class..
navLi.forEach((li) => {
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
}
li.addEventListener("click", () => {
let liClass = li.getAttribute("class")
????????????
})
});
sorry if this is confusing >_>

[@tiendang5149]

Very good , thank you!

[@webcifar]

Our pleasure!

[@Rystaal]

Don't work for me if section's height is in %... any advice to fix this issue?

[@shas3626]

Great video..had a question i am getting my section.OffsetTop as undefined.Can you help me with this?

[@SamFourieOfficial]

My sections variable just has an empty list, so it does not pick up the sections.

[@ogunkayodeoluwaseun9348]

What would happen if the nav li's had multiple sub-links ???
@WEB CIFAR

[@nadirmohamed8274]

You are the best bro

[@webcifar]

Thanks

[@ThisIsAhn]

ধন্যবাদ ভাই

[@samarjamil3053]

Awesome Bro! ❤️

[@webcifar]

Thanks 🔥

[@webnirbhar785]

How to open collapse data when scroll down in js Please help

[@ranadebnath5421]

thanku so much bhai ...

[@webcifar]

Welcome Bhai ♥

[@lanhphalla1623]

Very good video.
Can you create the video of this in small screen and move navbar by base on scroll?

[@noahdwhitney]

Be careful. You are adding a scroll listener, which fires a ton even on a short distance scroll. Every time the scroll event is fired you are iterating through a list of elements. This method could be extremely expensive. You should include logic in event listener callback to throttle how many times the iteration is done.

[@ahmadyamout6867]

Hello dear .Your code is not working because Pageyoffset is deprecated what is it's alternative please ?

[@vishnuk9628]

how to keep the selected nav color the same even after refreshing the page

[@senju31]

I'm not seeing the footer in console.log. I see the home and about section but not the footer.

[@omarakki705]

Thank you my brother

[@webcifar]

You are welcome

[@omarakki705]

@@webcifar do you have a tutorial in javascript

[@BarahaJewellery]

helpful

[@webcifar]

Glad it helped

[@nadirmemmedov6071]

good

[@webcifar]

Thanks

[@imranhossainbpp]

What if i want to add class in the nav while scrolling in a particular section ?
Love from @Bangladesh

[@MuhammadRizky-ub3oy]

why is my home offsetTop returning 0?

[@tomo_3883]

Vsc theme?

[@TommyTips]

It's cool ;)

[@webcifar]

🤟

[@hugoshaco8149]

When you are on home and click to footer: the animation ("active" so the red bg) is visible on all other nav button during the autoscroll idk if someone know what i mean :D also thx for this video

[@AzulCieloBlue]

When I scroll to the bottom the last section is not beign detected. help please! Cool and really helpful video btw

[@zayednation3692]

bro, can u do it for react js?

[@victory_lucky]

nice, but please zoom in a little bit when recording, watching on mobile is quite difficult.

[@webcifar]

Noted. ❤

[@aminzorriyeh2782]

how can i get this cod

[@gabrielfono844]

sir
I would love to start a youtube channel
could you tell with software you are using to record a course and which software you use to edit.
also which microphone and camera you are using
I really love creating content that is why I am building an application to share my content

[@webcifar]

That's awesome. I use OBS to record, DaVinci Resolve to edit and for the microphone I use BM800. For now, everything is working fine for me with this setup.

[@gabrielfono844]

@@webcifar thanks a lot 🙏

[@senju31]

There's a RUclipsr by the name of Bedimcode that implemented this feature in this video ruclips.net/video/6cidbUHNZRQ/видео.html but he did it differently from yours. I think yours was quicker to grasp because you explained what you were doing but he doesn't speak in his videos. I actually was able to break it down by watching your video and further reading and testing on my part. I may make a RUclips video on it , explaining how Bedimcode made his own work

[@Sebeklis]

There are tons of problems with routing etc.

[@entertainmenthut8896]

Your tutorial does not work for me. I am using sublime 3.

[@harshjha271]

Please explain properly i did'nt understand the logic in (if condtion) if anyone understand please explain this logic to me