How to target each menu different items on active state

  • I want to change the color for each of the items of the top nav here:

    https://www.mytechletter.com/MTLnew/thought-piece

    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?

  • The topic ‘How to target each menu different items on active state’ is closed to new replies.