CSS Class Active only parents

Question

I would like to only activate the parent class in the submenus, but it does not detect them at all, what would be the problem? I tried with jquery to add the class but it doesn't work at all

<nav class="navbar">
            <ul class="menu-start">
                <li><a href="{site_url}">Home</a></li>
                <li><a href="{path='about-us/index'}">About Us</a>
                    <ul>
                        <li><a href="{path='about-us/board-members'}">Board Members</a></li>
                        <li><a href="{path='about-us/mission-statement'}">Mission Statement</a></li>
                        <li><a href="{path='about-us/position-statements'}">Position Statement</a></li>
                        <li><a href="{path='about-us/our-logos'}">Our Logos</a></li>
                    </ul>
                </li>
                <li><a href="{path='issues-and-programs/index'}">Issues and Program</a>
                    <ul>
                        <li><a href="{path='issues-and-programs/naia-campaign'}">NAIA Campaigns</a></li>
                        <li><a href="{path='issues-and-programs/homes-for-animal-heroes'}">Homes For Animal Heroes</a></li>
                        <li><a href="{path='issues-and-programs/naia-shelter-project'}">NAIA Shelter Project</a></li>
                        <li><a href="{path='issues-and-programs/naia-advocacy-center'}">NAIA Advocacy Center</a></li>
                        <li><a href="{path='issues-and-programs/naia-rescue'}">NAIA Rescue</a></li>
                        <li><a href="{path='issues-and-programs/discover-animals'}">Discover Animals</a></li>
                        <li><a href="{path='issues-and-programs/consider-the-source'}">Consider the Source</a></li>
                    </ul>
                </li>
                <li><a href="{path='get-involved/index'}">Get Involved</a>
                    <ul>
                        <li><a href="#">Events Calendar</a></li>
                        <li><a href="#">NAIA Videos</a></li>
                        <li><a href="#">Volunteer</a></li>
                        <li><a href="#">Press center</a></li>
                        <li><a href="#">NAIA Rescue</a></li>
                        <li><a href="#">NAIA Trust</a></li>
                        <li><a href="#">Animal Heroes 2020 Virtual 5k</a></li>
                        <li><a href="#">Donate your car to NAIA</a></li>
                    </ul>
                </li>
                <li><a href="{path='resources/index'}">Resources</a>
                    <ul>
                        <li><a href="#">NAIA Brochures and Handouts</a></li>
                        <li><a href="#">Legal and Legislative Resources</a></li>
                        <li><a href="#">The Case Against Animals Rights and Environmental Extremism</a></li>
                        <li><a href="#">NAIA Trust</a></li>
                        <li><a href="#">Site of Interest</a></li>
                    </ul>
                </li>
                <li><a href="{path='naia-library/index'}">NAIA Library</a>
                    <ul>
                        <li><a href="#">NAIA Articles</a></li>
                        <li><a href="#">Press Releases</a></li>
                        <li><a href="#">Heroes,Winners and Success Stories</a></li>
                        <li><a href="#">White Papers</a></li>
                        <li><a href="#">Guest Editorials and Commentary</a></li>
                    </ul>
                </li>
                <li><a class="donate_active">Donate</a></li>
            </ul>
        </nav>

This is the CSS for the active class

.menu_NAIA .navbar ul.menu-start li a[aria-current="page"]{
background: #03AFF1 !important;
color: #fff !important;

}

JS CODE

    document.querySelectorAll('.menu_NAIA .navbar ul.menu-start li a').forEach
(link => {if(link.href === window.location.href){
    link.setAttribute('aria-current', 'page')
    }
})

I just want to keep the parent menus active only

If you want a selector which will only target the top level menu items, try `ul.menu-start>li>a` See https://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean — James, Aug 12 '22 at 20:43

PeterJames · Answer 1 · 2022-08-12T22:32:51.420

@James is right, ul.menu-start>li>a works.

The problem is with your test in the JavaScript code: if (link.href === window.location.href). The sample code you gave displays a different link to the one on your production website. See the console.log message at the bottom of the snippet output window.

I am not sure which parent menus you wanted, but I think this is correct.

/*
document.querySelectorAll('.menu_NAIA .navbar ul.menu-start li a').forEach(link => {
  if (link.href === window.location.href) {
    link.setAttribute('aria-current', 'page')
  }
})
*/

console.log(window.location.href);

document.querySelectorAll('a').forEach(link => {
  link.setAttribute('aria-current', 'page')
})

/*
.menu_NAIA .navbar ul.menu-start li a[aria-current="page"] {
  background: #03AFF1 !important;
  color: #fff !important;
}
*/

ul.menu-start>li>a[aria-current="page"] {
  background: #03AFF1 !important;
  color: #fff !important;
}

<nav class="navbar">
  <ul class="menu-start">
    <li><a href="{site_url}">Home</a></li>
    <li><a href="{path='about-us/index'}">About Us</a>
      <ul>
        <li><a href="{path='about-us/board-members'}">Board Members</a></li>
        <li><a href="{path='about-us/mission-statement'}">Mission Statement</a></li>
        <li><a href="{path='about-us/position-statements'}">Position Statement</a></li>
        <li><a href="{path='about-us/our-logos'}">Our Logos</a></li>
      </ul>
    </li>
    <li><a href="{path='issues-and-programs/index'}">Issues and Program</a>
      <ul>
        <li><a href="{path='issues-and-programs/naia-campaign'} ">NAIA Campaigns</a></li>
        <li><a href="{path='issues-and-programs/homes-for-animal-heroes'}">Homes For Animal Heroes</a></li>
        <li><a href="{path='issues-and-programs/naia-shelter-project'}">NAIA Shelter Project</a></li>
        <li><a href="{path='issues-and-programs/naia-advocacy-center'}">NAIA Advocacy Center</a></li>
        <li><a href="{path='issues-and-programs/naia-rescue'}">NAIA Rescue</a></li>
        <li><a href="{path='issues-and-programs/discover-animals'}">Discover Animals</a></li>
        <li><a href="{path='issues-and-programs/consider-the-source'}">Consider the Source</a></li>
      </ul>
    </li>
    <li><a href="{path='get-involved/index'}">Get Involved</a>
      <ul>
        <li><a href="#">Events Calendar</a></li>
        <li><a href="#">NAIA Videos</a></li>
        <li><a href="#">Volunteer</a></li>
        <li><a href="#">Press center</a></li>
        <li><a href="#">NAIA Rescue</a></li>
        <li><a href="#">NAIA Trust</a></li>
        <li><a href="#">Animal Heroes 2020 Virtual 5k</a></li>
        <li><a href="#">Donate your car to NAIA</a></li>
      </ul>
    </li>
    <li><a href="{path='resources/index'}">Resources</a>
      <ul>
        <li><a href="#">NAIA Brochures and Handouts</a></li>
        <li><a href="#">Legal and Legislative Resources</a></li>
        <li><a href="#">The Case Against Animals Rights and Environmental Extremism</a></li>
        <li><a href="#">NAIA Trust</a></li>
        <li><a href="#">Site of Interest</a></li>
      </ul>
    </li>
    <li><a href="{path='naia-library/index'}">NAIA Library</a>
      <ul>
        <li><a href="#">NAIA Articles</a></li>
        <li><a href="#">Press Releases</a></li>
        <li><a href="#">Heroes,Winners and Success Stories</a></li>
        <li><a href="#">White Papers</a></li>
        <li><a href="#">Guest Editorials and Commentary</a></li>
      </ul>
    </li>
    <li><a class="donate_active">Donate</a></li>
  </ul>
</nav>

And how could you keep the class active only for the parent page that you are only visiting? — Cristian Semeria, Aug 12 '22 at 22:09

CSS Class Active only parents

1 Answers1