Remove overview menu items or make them optional

Given the specific requirement to hide elements containing the word "Overview," it seems that CSS may not be the most suitable solution. Instead, I successfully accomplished this task using jQuery:

(function ($, Drupal) {
  Drupal.behaviors.hideMenuOverview = {
    attach: function (context, settings) {
      // CSS selector for the menu item.
      const menuSelector = '.menu-item__menu_link_content\\:7c45b7f1-64a6-4700-86f1-9216ee8d78ee';
      $(once('hide-menu-item-overview', menuSelector, context)).each(function () {
        // Find child element(s) within the menu item that contain "Overview"
        // text.
        const childElement = $(this).find('a:contains("Overview")');

        // Hide the child element(s)
        childElement.hide();
      });
    }
  };
})(jQuery, Drupal);

In case it's helpful to anyone wanting to take the CSS approach, this did the trick for me:

.gin--vertical-toolbar .toolbar-menu .toolbar-menu > .menu-item:nth-child(2) {
    display: none;
}

It feels a bit more fragile than I'd like. It would be nice if those 'Overview' items had a classname — e.g. 'gin-overview' or some such.

@justcaldwell: Thanks for your solution. I agree with your suggestion: menu items should have a unique reference for both their route and their location within the menu.

I ended up with using the 'href' as a pseudo-classname:

E.g to target 'Overview' in the 'Add content' sub menu:

.gin--vertical-toolbar .toolbar-menu .toolbar-menu .toolbar-menu li > a[href="/node/add"] {
  border: 1px solid red !important;
}