Main menu z-index clashing with Drupal CMS admin side menu

Hello,

The z-index values were originally set to 1000, 2000, and 3000 to address user complaints about menus being covered by other elements. These higher values were implemented to resolve those issues, but I understand that z-index preferences can vary based on individual use cases.

Unfortunately, changing them now could disrupt functionality for existing users. However, if you have a solution that works for your specific requirements, feel free to adjust the z-index values within the theme settings to suit your needs.

Navigate to the default theme settings (Solo or its sub-theme) under Global Settings, and add this code to the CSS Dynamic section.

#page-wrapper .main-navigation-wrapper {
  z-index: 500;
}
#page-wrapper .main-navigation-wrapper ul.navigation__menubar {
  z-index: 501 !important;
}
#page-wrapper .main-navigation-wrapper ul.navigation__menubar>li>ul {
  z-index: 502 !important;
}
#page-wrapper .main-navigation-wrapper ul.navigation__menubar >li>ul>li>ul {
  z-index: 503 !important;
}

Thank you for understanding!

Thank you, yup, I have been doing this by css code, and put at the css injector in global setting. But I think this will always have to trigger other users that first time using it. Anyway, you are right, there must be some other considerations too for the values. Or even let say you might provide admin field to override this for non coder. Just an opinion.

But thank you for clarifying, I really appreciate your contribution for this Solo theme (and since it was W3CSS).

You're welcome! Glad the Solo theme is working well for you! From the screenshot, it seems you're using Drupal's new experimental navigation. The current toolbar has a higher z-index than the Solo menu, but the new one doesn't. If you're using the new navigation, I’ve added some CSS to the dev version you can try. If not, here’s the CSS:

.admin-toolbar {
  z-index: 5000;
}

Best wishes,
Alaa