{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 女痞 的问题《How do I target each menu different items on activ》','https://www.manongdao.com/q-740316.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
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.
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.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