Vertically stacked dropdown menus

[rscaife2]

I am trying to get my dropdown menu to vertically stack for the secondary sub items. Currently when my dropdown menus are shown they stack vertically, but secondary sub items expand to the left. I would like for those secondary sub items to expand below the initial sub item.

[rad]

Hi @rscaife2,

Thanks for reaching out.

There is no available feature for that, but please add this CSS to your element’s CSS

    $el.x-menu > li > .x-dropdown > li  > .x-dropdown.x-active  {
        position: relative;
        left: 0;
    }

It wasn’t configured for that purpose, it may flicker once you hover to another sub-menus. That’s because the visibility also changes the height.

Thanks!

[rscaife2]

I added the code. It works for the menu when it’s expanded for a desktop but doesn’t work on responsive mobile version.

[rad]

Hi @rscaife2,

It only takes effect to the menu element where you added the CSS, please add the same CSS to your menu assigned as mobile menu. They are two different menu elements

And please don’t use the Dropdown menu element as your mobile menu, it’s just the same as Inline menu element and they should be used for desktop. Instead, add navigation collapse, navigation layered, and navigation modal elements. With those, you don’t need the above CSS.

Thanks!