Active Menu Classes Not Applied to Parent Li in Submenu (Twenty Twenty-Four)

  • Resolved Ramchetan Nhavi

    (@ramchetan79)


    3 weeks, 2 days ago

    When clicking on a submenu item in the navigation menu, the 'current-menu-item' or 'current-menu-ancestor' class is not applied to the parent <li> element in the menu (for both Twenty Twenty-Four themes). This prevents the parent menu item from being highlighted as active, even though the submenu item is selected.

    Steps to Reproduce:

    1. Go to a page with a navigation menu that has submenus.
    2. Click on a submenu item.
    3. Notice that the active class ('current-menu-item' or 'current-menu-ancestor') is not applied to the parent <li> of the submenu item.

    Expected Behavior: The parent <li> should receive the 'current-menu-item' or 'current-menu-ancestor' class, indicating that the parent menu item is active, as per WordPress’s default menu behavior.

    I also want to apply an active color to the arrow, but I’m facing an issue with that.

    It looks like you’re referring to a screenshot, but I can’t view images directly. If you describe the issue or share the specific details, I’ll be happy to help clarify or assist further!

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • Carolina Nymark

    (@poena)

    3 weeks, 2 days ago

    Hi @ramchetan79

    Block themes like Twenty Twenty-Four uses the navigation block for the menu.
    The HTML markup, class names and functionality is not controlled by the theme, it is all built into the navigation block itself.
    There is nothing the theme can do to change the element that the current-menu classes is added to.

    I am not sure what you mean when you write that “It looks like you’re referring to a screenshot”.
    Are you replying to someone? I don’t think all the context is in this forum post.

    Thread Starter Ramchetan Nhavi

    (@ramchetan79)

    3 weeks ago

    Hi @poena

    Please see the screenshot below:
    🔗 Screenshot Link

    I’m trying to ensure that the parent <li> element with the class current-page-ancestor is also applied when a child submenu item is active. Currently, only the child menu link gets the current-menu-ancestor class, but the parent menu item doesn’t reflect this state as expected.

    I suspect this might be related to the navigation block behavior, so I’ll be raising this question under [Gutenberg] support.

    Thanks for taking a look into this!


Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.