How to change navigation behaviour, in detail overwrite the hovering part?

0
.region-sidebar { .mx-navigationtree { li.mx-navigationtree-has-items { & > ul { display: block !important; Hi all,   I am currently changing the navigation of my app In Mendix i created it with this structure: Item: Group name     Subitem: Name 1     Subitem: Name 2 etc.   with scss i changed the behaviour that the subitems are always displayed:  .region-sidebar {     .mx-navigationtree {      li.mx-navigationtree-has-items {        & > ul {                 display: block !important;     But now to my problem:  Normal navigation:    When hovering over "Buffers and Storages":   How do i disable this hovering functionality? just SCSS doesnt solve the problem   Thank you in advance
asked
1 answers
1

hi,


In Atlas UI navigation, there are two layers of behavior:

  1. CSS visibility of submenus
  2. Hover interaction logic that controls positioning and overlay

Your SCSS made submenus always visible, but Atlas UI still applies hover positioning logic — that’s why the submenu appears stuck or mis-aligned when hovering.

To fully disable the hover behavior, you must override both the display and the positioning/hover logic.

Working Override (SCSS)

Add this in your theme (e.g., main.scss):


/* Keep submenus always shown and disable hover overlay */
.region-sidebar {
  .mx-navigationtree {
    li.mx-navigationtree-has-items {

      /* Submenu static in layout */
      > ul {
        display: block !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
      }

      /* Disable hover positioning effects */
      &:hover > ul {
        position: static !important;
        left: auto !important;
        top: auto !important;
      }
    }
  }
}

What this actually does

  • Forces all submenus into static layout (not overlay)
  • Stops the Atlas hover logic from relocating the submenu
  • Removes shadows and transforms that make it look like a floating overlay

Why simple display:block alone didn’t work

Atlas UI navigation uses:

  • Absolute positioning
  • Transform/translate
  • Hover events
  • to render submenus as overlays.

Just showing them (display:block) doesn’t stop those positioning styles — so you must override them.


answered