UI stackable menu does not stack the child "right menu"

[mixerp]

The right menu inside ui stackable menu does not display correctly on mobile devices

<div class="ui stackable menu">
  <a class="item">Browse</a>
  <a class="item">Submit</a>
  <div class="right menu">
    <a class="item">#</a>
    <a class="item">Help</a>
  </div>
</div>

Example:
http://jsfiddle.net/7wpm7bka/

[ThreeSevenths]

I've been struggling with this as well.

[jlukic]

This should be easy

[eveevans]

Do you want to handle this ?
or need help ?
:)

[jlukic]

Got it

[mixerp]

Thanks jack. You're a rockstar!

[eskiesirius]

I am still having this kind of problem, how to fix this?

[Unnumbered]

@eskiesirius you may use '.right.item' instead of '.right.menu .item'.

[ronlut]

I'm still getting this behavior as well..
Right menu items are unstackable (except the first item).
Any plans to fix it? @jlukic

[rasgo-cc]

+1: Only the first item on the right menu appears stacked along with the left menu items

[lednhatkhanh]

+1 This need to be fixed!

[arlyon]

here's an illustration of the problem, and a (bad) fix to illustrate what is happening to the other items:

https://jsfiddle.net/arlyon/h5e877mm/1/ (just make sure you have the result set to mobile width)

Essentially the other items in .menu.right are still being placed horizontally. The parent menu correctly stacks as it should, but .menu.right.stackable doesn't stack the items in menu right to match its parent.

[wtfuii]

This solved it for me:

<div class="ui stackable menu">
    <a class="item">My first left item</div> 
    <a class="item">My second left item</a>
    <a class="right item">My first right item</a> 
    <a class="item">My second right item</a> 
</div>

There may be a missing border on the right side, but currently this seems to be the best solution.

[droid-sheep]

It's right, the solution from @wtfuii has worked perfectly for me. But you have to deal with the margin-left of the .items

[Nsbx]

Hello,
Problem alway present at this date ;)

[traverse]

I think the following addition would be sufficient to fix this issue, it does require some testing though.

in menu.less:

@media only screen and (max-width: @largestMobileScreen) {

  ...

  .ui.stackable.menu .right.menu,
  .ui.stackable.menu .left.menu {
    flex-direction: column;
  }
}

If someone else would like to create a pull request go ahead and do it since I won't have enough time at the moment to do it.

[jlukic]

I've fixed this in 2.2.11

[imtinge]

I have add code like this

@media only screen and (max-width: 767px) {
  .ui.stackable.menu .right.menu {
    flex-direction: column;
  }
}

but if I add .pusher to body,to stick the footer(https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/)
the blow stackable elements will cover the menu