Multiple parent menu elements highlighted for single page

  • icommllc

    (@icommllc)


    5 years ago

    Hi. We have a site in development that often has the same page in more than one top-level menu area. For example, our “Teaching & Learning” PAGE lives under the “Educators” Page (in WordPress’ Page Hierarchy) but we also have it listed in the Menu under another top-level section “Administrators” which just links to the actual page (in the other section of the website). Examples: https://www.screencast.com/t/SbrO8jqSq and https://www.screencast.com/t/kPJPY5FLNuK So when going to “Teaching & Learning” via either method, both top level items are being highlighted (the on-state) as seen here: https://www.screencast.com/t/mP4zsotcjq How do we get the menu to only highlight the Page’s Parent in the Menu?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi icommllc,

    Your analysis of the situation is correct. It is core WordPress that adds the “current” classes to the menu items and it will be added to all ancestors of the current menu item.

    The only work around I can think of would be to add a “page-id-1234” body class to this page (usually you would have these on the <body> tag already):

    https://iu13org.kinsta.cloud/educators/instruction/

    … then use some CSS like:

    body.page-id-1234 #mega-menu-item-5248 {
    background: none;
}

    Regards,
    Tom

    Thread Starter icommllc

    (@icommllc)

    Thanks Tom. We tried this but I did not quite work. What we did learn is that it looks like the Plugin is looking at the slug of a page link in the menu, and if that slug is elsewhere in the menu, it highlights all their ancestors. For example, go to https://iu13org.kinsta.cloud/students-families/evaluating-children/ and you will see “Students & Families” AND “Administrators” highlighted. There are two links under Administrators menu that are the actual Page link (using Appearance > Menu > and adding a duplicate instance of a Page) to the main page at https://iu13org.kinsta.cloud/students-families/evaluating-children/. We then tried using a Custom Link that just had a link to “/students-families/evaluating-children/” but that did not help. We did that with two links under the “Educators” section. That did not work. But when we added a simple “?” to the end like “/students-families/evaluating-children/?” in the Custom Link, it knows to not highlight “Educators” when on the actual page of https://iu13org.kinsta.cloud/students-families/evaluating-children/ BUT when you click the link from under Educators – https://www.screencast.com/t/7tB6eHpY2Sd – it does redirect BUT the “Educators” IS being highlighted. Ideas on how to have it stop looking at the slug?

    Plugin Author megamenu

    (@megamenu)

    Hi icommllc,

    It is actually core WordPress that works out the ancestor classes, so this is a common problem (you’ll find those classes applied even with MMM disabled).

    The custom link idea is a good one, and one I have tried before, but WordPress is “too clever” and will work out that it is actually a real page. The only alternative I can think of would be to create a redirect to the correct page, and add the redirect URL to the menu rather than the link directly.

    Regards,
    Tom

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Multiple parent menu elements highlighted for single page’ is closed to new replies.