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

How to change color of current page HTML/CSS only?

I have a navigation menu, and need to change color of page I am on right now. Is it possible to do without adding backend logic?
HTML

<div class="navigation">
            <ul>
                <li><a href="/short-reference">Short reference</a></li>
                <li><a href="/early-life">Early life</a></li>
                <li><a href="/main-page">Main page</a></li>
            </ul>
     </div>

CSS

.navigation{
    display: block;
    width: auto;
    height: 40px;
    background-color: #22438C;
    font-family: monospace;

}

.navigation ul{
    margin-left: 500px;
    list-style: none;
    
}

.navigation ul li{
    display: inline-block;
    position: relative;
    background-color: rgb(23, 23, 70);
    
}
.navigation ul li a{
    text-decoration: none;
    display: block;
    padding: 10px 12px;
    color: white;
    text-align: center;
}

So if i am on "Short reference" page, in nav menu section of this page will have black background.

Tags:

2

Answers


  1. 0

    I interpreted your post in two ways: (I’m assuming you are using .html files and your navbar implemented within each file)

    How to change color of current page HTML/CSS only?

    Give each page an ID. (The reason I am saying to IDs and not Classes is because the styling would be unique for each page)

    Ex.

    #short-reference{
    background-color: #000000;
}

#searly-life{
    background-color: brown;
}

#main-page{
    background-color: rgba(225, 225, 225, 1);
}

    So if i am on "Short reference" page, in nav menu section of this page will have black background.

    You can give the navbar in each .html file its own ID. (AGAIN: The reason I am saying to IDs and not Classes is because the styling would be unique for each page’s navbar)

    Ex.

    #short-reference-navbar{
    background-color: #000000;
}

#searly-life-navbar{
    background-color: brown;
}

#main-page-navbar{
    background-color: rgba(225, 225, 225, 1);
}
    Login or Signup to reply.
  2. 0

    I’m unclear whether you’re trying to change the color of the entire menu or just the specific link, but if you’re trying to change the link this is how you can do it.

    Create CSS for a class named .active and then use a JavaScript to apply this class to the appropriate menu item.

    <script type="text/javascript">
  // Sets the "active" class to the navigation link based on the current URL
  function setActiveNavLink() {
    const currentUrl = window.location.pathname;
    const navLinks   = document.querySelectorAll('.navigation a');

    for (let link of navLinks) {
      const isActive = link.getAttribute('href') === currentUrl;
      const listItem = link.parentElement;

      // Add 'active' class to the parent <li>
      if (isActive) listItem.classList.add('active'); 
    }
  }

  // Call the function to set the active navigation link when the page loads
  document.addEventListener('DOMContentLoaded', setActiveNavLink);
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search