How do I target each menu different items on activ

2019-06-09 11:08发布

问题:

I want to change the color for each of the items of the top nav here on the active state:

For example, on the given page, and the category pages associated with this, I would like the header nav named "Thought Piece" to be purple when the user is on that page.

Currently I have:

builder-module-navigation li a, .builder-module-navigation li.current_page_item li a, .builder-module-navigation li.current-cat li a { font-size: 12px; padding: 0.2em .7em; line-height: 1.5em; color: #666; font-family:Georgia, "Times New Roman", Times, serif; text-decoration: none; background: transparent; text-transform:uppercase; }

I thought this would do the trick, but it's not:

.builder-module-navigation li.current_page_item #menu-item-78 li a, .builder-module-navigation li.current-cat #menu-item-78 li a { color:#9900cc; }

How do I target the specific classes correctly?

回答1:

You need to use a bit of PHP to do it as described in the WordPress Codex.

The relevant function is is_page() to determine which page you are on and some simple PHP logic to write a dynamic CSS attribute into the HTML.



回答2:

Easier to use <body <?php body_class(); ?>> to find the current page and your CSS. See http://codex.wordpress.org/Function_Reference/body_class and Wordpress wp_nav_menu help



回答3:

If you use the built in Menus module it will add a class of current to the correct link automatically.

Learn how to use custom menus here.