how can i make navbar items bigger on current page?

Question

so i want my navbar items to get bigger when im on the page that theyre linked to, for example if im on the home section i want the home button to be bigger and if im on about section i want the about button to get bigger. i tried the js script but idk why its not working here's the code

ul{
    list-style: none;
}
a{
    text-decoration: none;
}
#navbar{
    position: absolute;
    width: 50vw;
    left: calc(50vw - 25vw);

}
#navbarlist{
    top: 50px;
    left: 25vw;
    width: 50vw;
    position: fixed;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    padding: 0;
}
.navbaritem{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    opacity: 0.5;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.navbaritem:hover{
    transform: scale(1.5);
    margin-top: 30px;
}
.current{
    transform: scale(1.5);
    margin-top: 30px;
    color: aqua;
}
.home{
    background-color: rgba(216,157,255,1);
}
.about{
    background-color: rgb(236,136,183);
}
.products{
    background-color:rgba(255,115,115,1);
}
.services{
    background-color:rgba(255,179,111,1);
}
.contactus{
    background-color: rgba(255,253,106,1);
}
#home{
    width: 100vw;
}
#homeheader{
    font-size: 140px;
    position: relative;
    top:75px;
    transform: rotate(-3.4deg);
}
.sections{
    width: 100vw;
}
#aboutheader{
    position: relative;
    font-size: 70px;
    top: 500px;
}
#aboutuspart{
    font-size: 140px;
}

<header>
            <nav id="navbar">
                <ul id="navbarlist">
                    <li class="navbaritem home"><a class="" href="#home">home</a></li>
                    <li class="navbaritem about"><a href="#about">about</a></li>
                    <li class="navbaritem products"><a href="#products">products</a></li>
                    <li class="navbaritem services"><a href="#services">services</a></li>
                    <li class="navbaritem contactus"><a href="#contactus">contact us</a></li>
                </ul>
            </nav>
        </header>

i have tried to make that happen with js but its not working and i cant figure out why

Does this answer your question? [highlighting an active tab with vanilla JS](https://stackoverflow.com/questions/52388416/highlighting-an-active-tab-with-vanilla-js) — Fanoflix, Apr 25 '23 at 07:16

score 1 · Answer 1 · answered Apr 25 '23 at 07:30

Your first problem is that you're iterating over document.links before the content of the page is ever loaded. You need to wait for the DOM to be ready!

Eg.

document.addEventListener("DOMContentLoaded", () => {
   /* Iterate the links here! */
});

The second problem is that you're using anchor tags for your links currently, so you never actually go to a new page, where your class adding logic would run again.

There are a ton of solutions to making the links reactive to the anchor tag eg #about, look into this answer.

Here's a simple one (if you stick with anchor urls):

function addCurrentToUrl() {
  for (var i = 0; i < document.links.length; i++) {
    if (document.links[i].href === location.href) {
      document.links[i].classList.add("current");
    } else {
      document.links[i].classList.remove("current");
    }
  }
}

document.addEventListener("DOMContentLoaded", function() {
  addCurrentToUrl();
});

window.addEventListener("hashchange", function() {
  addCurrentToUrl();
});

hi thanks for the answer but the issue with this solution is that it makes the link itself bigger and not its container i want the container to get enlarged — mob x, Apr 26 '23 at 12:11
Simply add/remove the class to the parent element then, https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement — SeedyROM, Apr 27 '23 at 00:48

score 0 · Answer 2 · answered Apr 25 '23 at 07:17

0

To activate the current link on click, you can add an event listener to each link that sets the current class to the clicked link and removes it from any other links.

here is the updated code example:

https://codesandbox.io/s/navbar-item-bigger-xrgnhm

answered Apr 25 '23 at 07:17

Rohit Chugh

59
1
7

gotta add that code here on stackoverflow – user Apr 27 '23 at 00:00

how can i make navbar items bigger on current page?

2 Answers2