Set active state on navigation dynamically

Question

I seem to run into this problem frequently and can never find a solution. I have a Wordpress site with a top navigation. Since this is in my header.php, and used on all page

Answer 1

First, there is a css pseudo class prepared for styling 'active' links :

a:active {css}

For your situation, you would have to add this class to your styling :

.active a, a:active {css}

But your needs seems more on the PHP side than the CSS, perhaps someone else will help you with that part. There would be a javascript solution with jQuery, finding the actual location then inject a css selector to the proper element.

Check this article and this other one about wordpress. It will help you.

Stack Overflow references :

• How do I target each menu different items on active state in Wordpress
• How to add Active states and icons in wordpress wp_nav_menu()
• Loosing Nav Active State in Wordpress Dynamic Menu
• google search