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.
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.
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
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.
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); } }); ??? 🙂
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 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!
I’m not sure I understand? Here is a video I did on navbars recently though. Hopefully that helps. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-63sxOYm9GwY.html
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.
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!
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.
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-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!
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.
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.
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-63sxOYm9GwY.html), so I usually don't run into your question.
@@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 :)
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?
Yes, I’ve done a more recent tutorial on the same topic to address this problem. Hope it helps! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HpjW9eaFLIg.html
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?
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?
@@sydneysolomon5500 Been a long time since I did this, but I think this is along the lines of what you want? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-PolXp-MWJcs.html
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.
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.
