0

On a site I'm working on, I am using a blog category called 'Podcast' for any podcasts that are posted. I have this as a menu item as pictured. My only issue is, that when I click podcast (just a link to /blog/category/podcast/ it highlights both the Blog and Podcast menu items (pictured above), which makes sense, as each podcast is technically a blog post.

What I'm looking to accomplish is make it so that the blog menu item is not highlighted whenever one is at the Podcast link (/blog/category/podcast/) or when one is looking at a blog post with the sole category being 'Podcast'. I currently have a child theme but have been stumped as to what code I would need in my functions.php to allow me to accomplish this. I appreciate any help or guidance.

  • You might not need to do it in functions.php. This behaviour can probably be changed using CSS. If you could post a link to your site, I might be able to help. – Dmitry Mayorov Oct 19 '16 at 5:49
  • I was thinking I would potentially have to use functions.php to change the css conditionally. However, I'd love a css only way if that's possible. Site is here bit.do/podcastlink Thanks for taking a look! – Auborey Oct 19 '16 at 13:49
1

From what can see on your website, the Blog page is highlighted in a same way as a Podcast page because it has a class 'current_page_parent' that has the same styling in CSS as a 'current-menu-item' which is used on a Podcast menu item.

This means that the Podcast page is a child page of a Blog page. So there are two possible solutions for your problem in this case.

Solution 1.

Make the Podcast page a stand-alone (not child) page. Then this class will disappear with unwanted styling.

Solution 2.

If changing page hierarchy is not an option, add this CSS using a child theme, or Custom CSS plugin (like this one):

.header.white .topnav li.current_page_parent > a {
    opacity: 0.75 !important;
    font-family: Raleway;
    font-weight: normal;
}

This will revert the styles applied to that menu item.

Update 10/26/2016

As per your follow-up question, the snippet will look like this:

.category-podcast .header.white .topnav li.current_page_parent>a {
    opacity: 0.75 !important;
    font-family: Raleway;
    font-weight: normal;
}

Now it will work only on a podcast category archive.

  • Wow, thank you Dmitry. I should've been aware of the current_page_parent selector! The solution 2 was exactly what I was looking for, and is an ideal option given my current child theme. Cheers, and thanks again! – Auborey Oct 20 '16 at 4:55
  • No problem, I'm glad it helped! – Dmitry Mayorov Oct 20 '16 at 8:03
  • Dmitry, sorry to bother you again. I wanted to inquire as to whether or not you knew a good way to make the "blog" link also highlight when an individual non-podcast is clicked. – Auborey Oct 25 '16 at 5:09
  • Basically, your solution works great, the only downside, is the blog menu link is now not highlighted whenever one is on a blog post (of category not podcast). – Auborey Oct 25 '16 at 5:09
  • Sorry for delay. I've updated the answer. Now it should work. – Dmitry Mayorov Oct 26 '16 at 15:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.