Skip Navigation

Home › Support › English Support › [Resolved] "current-menu-item" class is missing in secondary language

[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.

Tagged: 

This topic contains 7 replies, has 2 voices.

Last updated by Osama Mersal 8 months, 2 weeks ago.

Assisted by: Osama Mersal.

Author Posts
September 13, 2024 at 6:40 pm #16177449

rayaA

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.

Note I found this bug in your system which is almost for sure a duplicate https://wpml.org/forums/topic/navigation-block-current-menu-item-class-is-missing-in-secondary-language/ , but I cannot access the JS workaround that is mentioned there in this page https://wpml.org/forums/topic/split-twenty-twenty-two-theme-navigation-current-item/#post-11529987 because when I try to access this page this is what I see: "This thread is no longer available, as it is over two years old. Please visit our support page to search more current forum threads or open a new ticket."

I use the Page Link block inside the Navigation Block. it is mentioned in the ticket here:
https://wpml.org/forums/topic/navigation-block-current-menu-item-class-is-missing-in-secondary-language/
the text in the ticket says:
- Menu items added as a "Page Link" block (as a direct child of the "Navigation" block) do not get the active class in the secondary language, and URLs need to be translated manually.

Symptoms:

Questions:
When is this bug expected to be fixed?
What is the workaround that I can use in the meanwhile?
September 15, 2024 at 10:59 am #16179829

Osama Mersal
WPML Supporter since 02/2020

Languages: English (English ) Arabic (العربية )

Timezone: Africa/Cairo (GMT+03:00)

Hi,

Thanks for contacting WPML forums support. I'll be glad to help you today.

First of all, sorry for the late reply; it was due to a higher workload.

1) Please log in to this hidden link">sandbox site and try to replicate the issue.

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");

Best regards,
Osama
September 15, 2024 at 4:53 pm #16180452

rayaA

Hello Osama thank you for your reply.

Please have a look in the sandbox site.

This page is a post in English -
hidden link

It has a navigation menu that shows the menu item of the post itself. You can see that it's blue because it's the current post.

Now go to the Spanish version of the same post

hidden link

you will see that the menu item is not blue because the

  • does not have the current-menu-item css class.

    The css styling can be found at Appearance-> Editor-> Styles-> Edit Styles-> Additional CSS

    .wp-block-navigation li.current-menu-item {
    color: blue;
    }

    		•
    September 16, 2024 at 9:05 am #16182293

    Osama Mersal
    WPML Supporter since 02/2020

    Languages: English (English ) Arabic (العربية )

    Timezone: Africa/Cairo (GMT+03:00)

    Hi,

    Thank you for replicating the issue. When I check the translated post, I don't see the menu at all.

    Please check it and let me know if you see the same or if it's an issue at my end.

    Best regards,
    Osama
    September 16, 2024 at 11:24 pm #16185687

    rayaA

    Please have a look in the screenshot, the menu is in the post content.

    1.jpg
    September 17, 2024 at 6:59 am #16186299

    Osama Mersal
    WPML Supporter since 02/2020

    Languages: English (English ) Arabic (العربية )

    Timezone: Africa/Cairo (GMT+03:00)

    Hi,

    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)

    Best regards,
    Osama
    September 17, 2024 at 4:36 pm #16189930

    rayaA

    Thank you, how do I find the menu ID of the Spanish menu?
    September 18, 2024 at 6:51 am #16191168

    Osama Mersal
    WPML Supporter since 02/2020

    Languages: English (English ) Arabic (العربية )

    Timezone: Africa/Cairo (GMT+03:00)

    Hi,

    Please go to WPML-> Translation Management, filter by Navigation Menus, select the 2nd language and filter, hover on the menu name, and click edit.

    In the URL bar, you will see the translated menu ID.

    Best regards,
    Osama
    September 22, 2024 at 10:16 pm #16206957

    rayaA

    Thank you. instead of changing the values directly the database, I edited the Spanish menu itself using the code editor option. The workaround works.