Question 55688 in Html Question posted in
Some basic documentation can be found here.

how can i make navbar items bigger on current page? – Html

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

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="horizontalscroll.css">
        <script>
            var current = 0;
            for (var i = 0; i < document.links.length; i++) {
            if (document.links[i].href === document.URL) {
            current = i;
            document.links[current].className = 'current';
                }
            }
        </script>
    </head>
    <body>
        <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>

here is the css:

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;
}

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

Tags:

2

Answers


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

    Login or Signup to reply.
  2. 0

    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();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search