[Resolved] "current-menu-item" class is missing in secondary language
This thread is resolved. Here is a description of the problem and solution.
Problem: If you're experiencing an issue where the CSS selector
current-menu-item
is not being appended to the menu item in the navigation block of the page that is currently being viewed in a secondary language, this might be due to incorrect post IDs in the translated menu. Solution: We recommend checking the
wp_posts
table in your database for the menu ID and verifying the record. You should ensure that the post IDs match the translated IDs. Here is an example of what you might see and how to correct it:
<!-- wp:navigation-link {"label":"Post A – es ","type":"post","id":66,"url":"https://your-site.com/es/2024/09/15/post-a-es/","kind":"post-type"} /-->
This ID should be updated to the correct translated post ID, like so:
<!-- wp:navigation-link {"label":"Post A – es ","type":"post","id":72,"url":"https://your-site.com/es/2024/09/15/post-a-es/","kind":"post-type"} /-->
After making these changes, the menu should work correctly in the secondary language.
If this solution does not resolve your issue, or if it seems outdated or irrelevant to your case, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If you still need assistance, please open a new support ticket at WPML support forum.
This is the technical support forum for WPML - the multilingual WordPress plugin.
Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.
Background of the issue:
I am using the css selector current-menu-item that WP appends to the menu item in Navigation Block of the page that is currently been viewed in order to add styling to it (in this case, blue color). It works on my main language, but in the secondary language this css class is not being appended to the menu item.
If the issue is replicable, please let me know to check it and consult our compatibility team.
2) Here is the JS code in the ticket you mentioned:
current = 0;
for (var i = 0; i < document.links.length; i++) {
if (document.links[i].href.split("#")[0] === document.URL.split("#")[0]) {
current = i;
if(document.links[current].parentElement.classList.contains('wp-block-navigation-item') ) break;
}
}
document.links[current].parentElement.classList.add("current-menu-item");
Thanks for the screenshot. I checked the issue, and we have an escalated ticket for this issue.
The issue happens because the translated menu in the database doesn't have the correct post IDs. Please go to the wp_posts table, search for the menu ID, and check the record.
<!-- wp:navigation-link {"label":"Post A – es ","type":"post","id":66,"url":"<em><u>hidden link</u></em>","kind":"post-type"} /-->
<!-- wp:navigation-link {"label":"Post B – es","type":"post","id":80,"url":"<em><u>hidden link</u></em>","kind":"post-type"} /-->
<!-- wp:navigation-link {"label":"Post C – es","type":"post","id":82,"url":"<em><u>hidden link</u></em>","kind":"post-type"} /-->
The IDs there are the default language post IDs. I changed them to match the translated IDs.
<!-- wp:navigation-link {"label":"Post A – es ","type":"post","id":72,"url":"<em><u>hidden link</u></em>","kind":"post-type"} /-->
<!-- wp:navigation-link {"label":"Post B – es","type":"post","id":84,"url":"<em><u>hidden link</u></em>","kind":"post-type"} /-->
<!-- wp:navigation-link {"label":"Post C – es","type":"post","id":86,"url":"<em><u>hidden link</u></em>","kind":"post-type"} /-->
After that, the menu worked correctly. Please check the translated post. (hidden link)
