Highlight Current Menu Item For CPT Single pages

[Alexander]

How can I apply the “current state” to buttons in the main menu when a user visits a custom post type single page?

Commonly available code snippets don’t seem to work in Cwicly.

I know that this has been discussed in other threads but it doesn’t seem that there is a solution for this request. Is there a workaround to achieve this? Thanks!

[StrangeTech]

Hi @Alexander,

Please see:

Add current class to current dropdown sub menu items in Nav block

Update: as of 1.3.3.1, while the .current class is not added, now that the WordPress classes are being applied to menu items, we can use the .current-menu-item class to style menu items more generally, so effectively, there is a working solution for this.

You may also find this interesting:

When viewing post pages, set the post archive page in the menu to current or current-menu-parent / current-menu-ancestor

As of the 1.3.3.1 this is now fully achievable. We have some fairly generic, re-usable code that enables this. We will share it here soon after we have tested it on a couple of sites.

[Alexander]

Thank you. Yes, I saw those posts but I have no idea how to interpret it.

Is there already a way to achieve this or if this is something the Cwicly team is working on

[StrangeTech]

@Alexander

Is there already a way to achieve this or if this is something the Cwicly team is working on

I can help you do what you want, I just need a bit more information first so I know exactly what you are wanting to achieve.

Please confirm the following:

1. Are you wanting to show a different style for the post archive menu item associated with the visited post?
2. Are you wanting to show a different style for the post category/custom taxonomy term menu item associated with the visited post?
3. Are you wanting to show a different style for the post menu item associated with the visited post?

As soon as I know these answers, I can share with you the method we use to do this.

[Alexander]

I really appreciate your help! Unfortunately, I am having a hard time answering your questions.

This is what I try to accomplish:

1. I have a main menu item called “Work”.
2. When a user clicks on “Work” it will lead to the work archive page (CPT Archive) and the main menu item button “Work” is blue.
3. Clicking on a specific project will lead to the project detail page (CTP single)
4. Goal: Having the main menu item button “Work” blue when a user visits any of the CPT single pages. Currently the button “Work” is black instead of blue

Sorry for the long explanation. Please let me know if you need more information from me.

[StrangeTech]

@Alexander

I really appreciate your help! Unfortunately, I am having a hard time answering your questions.

You have given all of the information I asked for.

@Alexander

Please let me know if you need more information from me.

One final question, are you using:

1. a Menu block
2. a Nav block
3. a Nav block containing a Menu block

[Alexander]

I am using the menu block provided by Cwicly.

[Alexander]

Hi StrangeTech,

Following up our conversation from last week. Did you get a chance yet to look into my issues highlighting menu items for single CPT pages?

Thanks.

[StrangeTech]

Hi @Alexander,

Please see this tip:

Highlight hierarchical ancestor menu items for pages and posts (e.g. custom taxonomy and terms)

I have tested and confirmed the following works with a Nav block or a Nav block containing a Menu block, or a standalone Menu block. The code does two things: Makes nav/menu items highlight when they are logically hierarchical ancestors based on the URL e.g. https://site.com/type will be highlighted if there is a page or post with the url https://site.com/type/some-page-or-post Makes nav/menu items highlight when they are hierarchically related by custom taxonomy e.g. when a viewing a post,…

I hope this gives you exactly what you need.