This is probably the easiest way I've seen of adding an active class. Instead of going and removing the class from the previously selected link, it skips all that non-sense.Lovely!
He doesn't have to remove the class because the page does refresh on each click, so the class is being removed already once he clicks any of the buttons, The solution u are saying is for the same page buttons without any refreshes, at this moment u gotta remove the class then add it to the new clicked button
I found out I could use activePage = window.location.href and use strict equality operator to campare it to each "href" with the same results as yours. Your video just introduced me to Browser Object Model. Thanks a lot.
FINALLY I found your video. I was so much looking for this. But other videos I found were so overcomplicated and missing the point. Thank you, very well done.
Thanks a lot. I thought having an active link status was super easy like 1 css pseudo elements lol. . I found no good tuto on how to do it. Nothing worked until yours. Awsome Channel subbed. Thx.
Anchor links can take you to any element on the page with an ID. It takes two steps: 1. Create a page element with an ID. Like this… Hi, I’m a link! 2. Point the href of an anchor tag to that ID. like this… Click to jump (Note the #) Whenever you click the link, it’ll jump to that ID on the page.
You put a forward slash in front of the anchor links. So, when running in a browser, this makes it try to find the file in the root directory. I removed this forward slash and it works in browser and the local web server.
This is a wonderful solution. I was having an issues where ALL of my nav links had the active class added to them- because I am utilizing a directory. To skirt this I came up with this: By directly/strictly comparing the window href and the link href, there is only one possible match. document.querySelectorAll('.nav-links a').forEach(link => { if(link.href === window.location.href) { link.classList.add('active'); } });
Thank you very much ! So the code is : const activePage = window.location.pathname; const navLinks = document.querySelectorAll('.nav-links a').forEach(link => { if(link.href === window.location.href){ link.classList.add('active'); console.log(link); } }); ??? 🙂
Okay, so it deleted it, but the preview showed me enough! Ha. The problem is your window.location.pathname will include the directory (/wordpress/) and since your homepage includes that pathname and all four links include that section in their pathname, they're all highlighted. My initial thought is that you should just clip out the "/wordpress/" from the pathname, which you can do with the substring method (assuming all your menu items will always be in that directory, wordpress). The substring takes a number as an argument and basically slices off those indexes from your string. So in all, change … const activePage = window.location.pathname; to … const activePage = window.location.pathname.substring(10); --- Let me know if that doesn't make sense or doesn't solve your problem.
@@CodinginPublic Thank you for the reply. Did not work. I noticed it for the first time when the site was on localhost. I will let you know if it is working after migration.
@@sebastianszydlowski5834 Ah-sorry you're still having trouble with it. For what it’s worth, I used the solution I mentioned in your live site (just changed the JS file) and it worked properly in my tests, but it all depends on the folder structure. Happy to help more if it would be a help.
Is there a need to synchronize the desktop navbar active states to mobile navbar active states if both the styles are different? Meaning If I click the mobile nav link. The same link in the desktop nav should be active and vice versa. I spent a lot of time and accomplished this in a practice problem but I'm worried that it was not worth the effort.
Thanks for the comment. Hmm…assuming you have the desktop/mobile nav bar set to display:none whenever it's not showing, it shouldn't matter. If they're both rendered and you set them both to active, that would cause some accessibility issues, I believe. FWIW, I usually only have one nav that I just style differently depending on viewport width (example: ruclips.net/video/63sxOYm9GwY/видео.html), so I usually don't run into your question.
Thanks a lot for this tutorial! I recently came across you channel and subscribed. How can you keep the parent active is it has children? Thanks again!
Thank you very much for the video. I implemented your code accordingly and experiencing one issue I'd greatly appreciate your assistance with. When I click the nav home link all the links become active and I'm not sure why? Looking at the console.log it shows all path names not just the home page index.html. Thank you in advance for your help.
Glad it was a help! Hmm…I’m guessing you’re in a directory? Like…www.website/temp/ If that’s the case, all links in your nav links will include the directory (“temp” in this example). Go to your home page and console.log(window.location.pathname) Assuming that’s the problem it will include the directory and you can remove it by using the substring method. If that’s not clear or doesn’t work, feel free to drop a link to a GitHub or something or DM on Twitter at cpenned.
Sure! Just switch up the CSS. I'd make it have a transparent underline (border-bottom) when not selected and then just the color you want when it is selected.
Hi, I am looking for a tutorial, when you click Home button or any other it takes you the information that is the particular button. Do u have such a tutorial?
Is there a way to do this for sub links in a side panel inside a parent link, like a tree, To make the parent link remain open displaying child/sub links? Is there a video that can help me?
Great tutorial, so clear and plesant to here, thank! One quick question, let say you click the home button and it gets the active class, But what remove this class in next rounds? Logically it should have left this class on every button that had been clicked so eventually if you click all the buttons all of them will be black
Glad it was a help! Because you’re applying the class using client-side JavaScript, the class will be removed each time you change to a different page. Once you arrive on the next page, you can apply the class again for the current page you’re on at that time. Does that make sense? I’ve actually updated my process for applying active links here: ruclips.net/video/HpjW9eaFLIg/видео.html
@@CodinginPublic totally makes sense cause i haven't learnt client side js yet, but i will look up at the link you gave, so much thankful for the quick respond! Subscribed!
You’re welcome! Client-side JavaScript means JavaScript that the site visitor’s browser runs (so like the JavaScript we wrote in this video). In other words, it’s only applied once the page loads. Hopefully that helps some. Thanks for the sub!
Hey brother, I need some help... Please reply to my comment... I applied this JavaScript on my blogger blog... Everything's perfect but when I'm on the home page the active class is added to all of the links instead of adding to only the home page link... Why is this happening?
@@CodinginPublic Sort of had a typo on the first try, but it works lovely now, I'll be using this from now on all my sites, Thank you again and great work!
thank you for this tuto. I actually had to use window.location.href instead of pathname since Im using different slugs to the same pathname between product categorys in php.
@@CodinginPublic that is okay I am stealing this and making my own video lol I will add a secondary class called link so I can add an underline and change the backgrouind color etc.. thanks so much :)
Easier way with just 2 lines of CSS: .current-menu-item a { color: #FFFFFF !important; background: #2889AE !important; } So much useless stuff with all the html and javascript. I don't want to hack into the pentagn, just make the active menu item highlighted....
This is such a long time ago I’m sure I’d do it differently than however I did it in this video. Just be careful about those !important flags. They can get you into trouble :) I’d also consider using the aria-current=“page” attribute instead of a class to make this more accessible.
I love the way that you explain things
as software engineer, we all love simplicity.
thanks for providing such high value to the community
That’s very kind. Thanks for saying something!
This is probably the easiest way I've seen of adding an active class. Instead of going and removing the class from the previously selected link, it skips all that non-sense.Lovely!
Glad it was a help!
He doesn't have to remove the class because the page does refresh on each click, so the class is being removed already once he clicks any of the buttons,
The solution u are saying is for the same page buttons without any refreshes, at this moment u gotta remove the class then add it to the new clicked button
The step by step explanation was really great! Thank you
Great! Thanks for saying something!
this was the most simplest and on point tutorial on this topic.....much love from INDIA
So glad you enjoyed it!
I found out I could use activePage = window.location.href and use strict equality operator to campare it to each "href" with the same results as yours. Your video just introduced me to Browser Object Model. Thanks a lot.
Awesome! You're welcome. I also did a follow-up video that should help, too! ruclips.net/video/HpjW9eaFLIg/видео.html
FINALLY I found your video. I was so much looking for this. But other videos I found were so overcomplicated and missing the point. Thank you, very well done.
basically we are highlighting that navlink to which it belongs, its that simple. I will use this forever.
Glad it was a help!
Your code is see,simple to understand, and the presentation itself is so sweet.
Glad you liked it
Thank you very much, sir! I was trying to find a solution for three hours, but none of them worked. Finally, this worked perfectly.
Wonderful! Thanks for sharing!
I saw others solutions, but yours is the most simple and the most well explained of all! Thanks!!!
So glad it was a help!
it is so awesome and easy to understand which anyone never told me this video deserve more likes
Glad it was a help! Thanks for saying something!
Such an amazing and informative video! Thanks so much. I landed up on this channel through your videos on Shaun's channel. Glad I found it!
Thanks so much. Glad you enjoyed it!
Thank god I found this video. I lost sometime looking for this solution. Thanks Bro!
Awesome! So glad it was a help! Thanks for saying something!
Perfect, exactly what I needed. Thank you!
You’re welcome!
Congratulations. This is the best solution that I found in the RUclips. Thank you very much.
Sir on home page it apply to all links active class and on console it show active 5 link in only on home page
On some sites that's the case. Did an update that fixes that an a few other issues :) ruclips.net/video/HpjW9eaFLIg/видео.html
Hi!, amazing stuff! Is it easy to stop page refresh? Maybe using ajax/fetch? Many thanks
I'm not sure I understand what you mean?
Thanks so much for this amazing video. JavaScript has been after my life these past few weeks. This solved my problem
You’re welcome! Glad it was a help! I’ve got an update coming out soon, too!
Thanks a lot. I thought having an active link status was super easy like 1 css pseudo elements lol. . I found no good tuto on how to do it. Nothing worked until yours. Awsome Channel subbed. Thx.
So glad it was a help! Thanks for saying something!
You explained it so well and simple. Thank you!
Glad it was helpful!
Thank youuuu I struggled a loot with this so thank you 🎉🎉
Happy to help!
Hi How do I get the content stay on the page, instead of taking me to new page with using anchor?
Anchor links can take you to any element on the page with an ID. It takes two steps:
1. Create a page element with an ID. Like this…
Hi, I’m a link!
2. Point the href of an anchor tag to that ID. like this…
Click to jump
(Note the #)
Whenever you click the link, it’ll jump to that ID on the page.
what if first page is "/" instead of "/index.html" ? we cannot use link.hred.include in that case
I did this follow up video with that in mind: ruclips.net/video/HpjW9eaFLIg/видео.html
Hope that helps!
@@CodinginPublic you are god😍, Thank you. I resolved one of the story at my firm . Thanks a lot🥳🥳🥳
@@CodinginPublic Thanks for replying that fast 😁
You are an excellent teacher, thank you.
You're very welcome!
hi, My problem is when in the url doesn't have "index.html", It active for all the link. what should is do?
Yes, I’ve done a more recent tutorial on the same topic to address this problem. Hope it helps!
ruclips.net/video/HpjW9eaFLIg/видео.html
Thanks for that 😘
You put a forward slash in front of the anchor links. So, when running in a browser, this makes it try to find the file in the root directory. I removed this forward slash and it works in browser and the local web server.
This video really helped a lot, thank you!
Glad it helped!
This is a wonderful solution. I was having an issues where ALL of my nav links had the active class added to them- because I am utilizing a directory. To skirt this I came up with this: By directly/strictly comparing the window href and the link href, there is only one possible match.
document.querySelectorAll('.nav-links a').forEach(link => {
if(link.href === window.location.href) {
link.classList.add('active');
}
});
Great! Yeah, I updated this video here to work the way it SHOULD have worked. :) ruclips.net/video/HpjW9eaFLIg/видео.html
Thank you very much ! So the code is : const activePage = window.location.pathname;
const navLinks = document.querySelectorAll('.nav-links a').forEach(link => {
if(link.href === window.location.href){
link.classList.add('active');
console.log(link);
}
}); ??? 🙂
@@ylitandi I will have to look back at my code. But that should work. Have you demoed it? Also, there's no need for that console.log(link).
What's happening I can't see things clearly
It's highlighting the active page link in the nav bar. Is that what you're asking?
Profesor muchas gracias por este video me sirvio de mucho saludos desde Colombia
🙏
Thank you! This is really helpful! Does this concept work for one page websites where the Nav links to IDs within the same HTML file?
You’re welcome! For IDs on a one-page site it’s even easier! You can use the :target pseudo selector to apply styles to the nav links using only CSS!
@@CodinginPublic awesome! Thank you very much!
Do you know how make dynamic navbar (all forder page show into navebare) for each li maybe?
I’m not sure I understand? Here is a video I did on navbars recently though. Hopefully that helps.
ruclips.net/video/63sxOYm9GwY/видео.html
This function adds active class to all links when websote is visited for the forst time. How can I remove this class?
Hmm. It shouldn’t. Happy to view your code and give you a solution. Feel free to DM on Twitter or share a public link.
Hey! I saw you commented, but RUclips deleted it before I could see it. 🙄 feel free to try again or DM me on Twitter at @cpenned.
Okay, so it deleted it, but the preview showed me enough! Ha. The problem is your window.location.pathname will include the directory (/wordpress/) and since your homepage includes that pathname and all four links include that section in their pathname, they're all highlighted.
My initial thought is that you should just clip out the "/wordpress/" from the pathname, which you can do with the substring method (assuming all your menu items will always be in that directory, wordpress). The substring takes a number as an argument and basically slices off those indexes from your string.
So in all, change …
const activePage = window.location.pathname;
to …
const activePage = window.location.pathname.substring(10);
---
Let me know if that doesn't make sense or doesn't solve your problem.
@@CodinginPublic Thank you for the reply. Did not work. I noticed it for the first time when the site was on localhost. I will let you know if it is working after migration.
@@sebastianszydlowski5834 Ah-sorry you're still having trouble with it. For what it’s worth, I used the solution I mentioned in your live site (just changed the JS file) and it worked properly in my tests, but it all depends on the folder structure. Happy to help more if it would be a help.
Thanks so much. This tutorial was really helpful and well explained.
Wonderful! Thanks for saying something!
Is there a need to synchronize the desktop navbar active states to mobile navbar active states if both the styles are different? Meaning If I click the mobile nav link. The same link in the desktop nav should be active and vice versa. I spent a lot of time and accomplished this in a practice problem but I'm worried that it was not worth the effort.
Thanks for the comment. Hmm…assuming you have the desktop/mobile nav bar set to display:none whenever it's not showing, it shouldn't matter. If they're both rendered and you set them both to active, that would cause some accessibility issues, I believe. FWIW, I usually only have one nav that I just style differently depending on viewport width (example: ruclips.net/video/63sxOYm9GwY/видео.html), so I usually don't run into your question.
@@CodinginPublic Thank you, that's insightful!
Thanks for this video ,it helped me a lot.
Wonderful! Thanks for saying something!
Thanks, man. absolutely brilliant
Glad it was a help!
Thanks a lot for this amazing content.
Glad it was a help!
Not hover before clicking
not sure I understand? Did I style it wrong? I can’t remember-this has been a while :)
Thanks a lot for this tutorial! I recently came across you channel and subscribed. How can you keep the parent active is it has children? Thanks again!
Thanks so much! Just to make sure I understand, are you wanting to keep the parent active if it has a submenu?
@@CodinginPublic Yes, I want to keep the parent active if it has a submenu. Thanks for the quick reply.
Just saw today that RUclips blocked your reply and never notified me. Sorry! You still need help?
@@CodinginPublic Yes, I still like to know how to keep the parent menu item active when the child menu item is selected. Thank you.
Thanks a lot! This tutorial helped me.
Awesome! Thanks for saying something!
Thank you very much for the video. I implemented your code accordingly and experiencing one issue I'd greatly appreciate your assistance with. When I click the nav home link all the links become active and I'm not sure why? Looking at the console.log it shows all path names not just the home page index.html. Thank you in advance for your help.
Glad it was a help! Hmm…I’m guessing you’re in a directory? Like…www.website/temp/
If that’s the case, all links in your nav links will include the directory (“temp” in this example).
Go to your home page and console.log(window.location.pathname)
Assuming that’s the problem it will include the directory and you can remove it by using the substring method.
If that’s not clear or doesn’t work, feel free to drop a link to a GitHub or something or DM on Twitter at cpenned.
@@CodinginPublic Thank you for your quick reply Chris. I will let you know if your suggestion works. Thanks again!
Great! Just one question... how can you also add the active class to the menu section if you scroll down or up the page ? Thank U!
I’ve done a tutorial like this a long time ago, but not finding it right now. Sorry!
What Editor Do You Use ?
I think I was using Nova in this video, but I use VSCode now.
What a wonderful tutorial
So glad you enjoyed it!!
This saved me, thank you so much!
I'm so glad!
thank you for the vid. I am trying to have the viewed page underlined instead of highlight with black blocks. is that possible with this method?
Sure! Just switch up the CSS. I'd make it have a transparent underline (border-bottom) when not selected and then just the color you want when it is selected.
Bro u got a new subscriber
Legend!
Hi, I am looking for a tutorial, when you click Home button or any other it takes you the information that is the particular button. Do u have such a tutorial?
Do you mean anchor links?
@@CodinginPublic Yes...example if you click on the HOME button it should take you whatever is the text about NOME. Same for all the other buttons.
@@sydneysolomon5500 Been a long time since I did this, but I think this is along the lines of what you want? ruclips.net/video/PolXp-MWJcs/видео.html
Is there a way to do this for sub links in a side panel inside a parent link, like a tree, To make the parent link remain open displaying child/sub links? Is there a video that can help me?
There is a way to do this; not sure about a video? I haven't done one. Sorry! :)
@@CodinginPublic After all, this video was also enough to achieve what I wanted with my parent and child links. Thank you 👌
Great tutorial, so clear and plesant to here, thank!
One quick question,
let say you click the home button and it gets the active class,
But what remove this class in next rounds?
Logically it should have left this class on every button that had been clicked so eventually if you click all the buttons all of them will be black
Glad it was a help! Because you’re applying the class using client-side JavaScript, the class will be removed each time you change to a different page. Once you arrive on the next page, you can apply the class again for the current page you’re on at that time. Does that make sense?
I’ve actually updated my process for applying active links here: ruclips.net/video/HpjW9eaFLIg/видео.html
@@CodinginPublic totally makes sense cause i haven't learnt client side js yet, but i will look up at the link you gave, so much thankful for the quick respond! Subscribed!
You’re welcome! Client-side JavaScript means JavaScript that the site visitor’s browser runs (so like the JavaScript we wrote in this video). In other words, it’s only applied once the page loads. Hopefully that helps some. Thanks for the sub!
@@CodinginPublic thanks!
Hey brother, I need some help... Please reply to my comment... I applied this JavaScript on my blogger blog... Everything's perfect but when I'm on the home page the active class is added to all of the links instead of adding to only the home page link... Why is this happening?
Fixed in this video :)
ruclips.net/video/HpjW9eaFLIg/видео.html
BRILLIANT THANK YOU!
Awesome! Glad you liked it!
@@CodinginPublic Sort of had a typo on the first try, but it works lovely now, I'll be using this from now on all my sites, Thank you again and great work!
👀
Good and easy to understand
Glad it was a help!
Superb explanation.
Glad you liked it
you are a g thanks for that!
Wow i need it but plz provide the source code
In description :)
precise, quick, useful
Glad you found it helpful!
thanks for the code it was helpful for me
So glad! Thanks for taking the time to say something!
YOu are king, :) . Alexander the great
lol glad you liked it
thx man very simlpe and clear
You're welcome!
The codepen has only the JS file...
Well, because every site is so different and the focus was on implementing the JS for any page. Let me know if you get stuck. Happy to help!
thank you for this tuto. I actually had to use window.location.href instead of pathname since Im using different slugs to the same pathname between product categorys in php.
Yes! I ended up updating the video later to something much better here :) ruclips.net/video/HpjW9eaFLIg/видео.html
thanks Sir Jee. It Very Help Full Thanks .
Glad it was a help!
Very helpful!
Good to hear! Thanks for saying something!
Sir please give all files
Link in the description!
good work bro. thanks
glad it was a help! Thanks for saying something!
really helpful
Thanks for saying something. Glad it was a help!
Thank you!
You’re welcome! Thanks for saying something!
i wish you had the css for this too on your code pen but still n awesome vid
Yeah, sorry 😞. This was before I was saving all code from my videos I think
@@CodinginPublic that is okay I am stealing this and making my own video lol I will add a secondary class called link so I can add an underline and change the backgrouind color etc.. thanks so much :)
Super
Thank you so much, super like
Glad you enjoyed it!
Bro what about these slugs contact%20Us ?
Did a follow-up video for these types of situations :) ruclips.net/video/HpjW9eaFLIg/видео.html
@@CodinginPublic great thnx
thank you, sir
Thank you so much man
So glad it was a help!
awsm great!!
Works well!! DANKEEE
You’re welcome!
thank you so much
You’re welcome! Thanks for saying something!
Thanks!
You’re welcome! Thanks for saying something!
💙💙
ty very much
You're welcome!
u da mann
glad you found it helpful!
code plase
In the description 😊
Easier way with just 2 lines of CSS:
.current-menu-item a {
color: #FFFFFF !important;
background: #2889AE !important;
}
So much useless stuff with all the html and javascript. I don't want to hack into the pentagn, just make the active menu item highlighted....
This is such a long time ago I’m sure I’d do it differently than however I did it in this video. Just be careful about those !important flags. They can get you into trouble :)
I’d also consider using the aria-current=“page” attribute instead of a class to make this more accessible.
Thank you so much
Glad it was a help!
Thank you so much
You're welcome