Semantic-UI: UI stackable menu does not stack the child "right menu"

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">Sign Up</a>
    <a class="item">Help</a>
  </div>
</div>

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

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 5
Comments: 17 (3 by maintainers)

Commits related to this issue

#3604 - fixes issue with right menu / item including margin when stacked — committed to Semantic-Org/Semantic-UI by jlukic 8 years ago
Fixes #3604 #5116 Issue with left/right menu on stackable mobile — committed to Semantic-Org/Semantic-UI by jlukic 7 years ago

Most upvoted comments

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.

wtfuii on Sep 29, 2016

+1 This need to be fixed!

lednhatkhanh on Aug 31, 2016

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

eskiesirius on May 26, 2016

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.

traverse on Mar 1, 2017

I’ve fixed this in 2.2.11

jlukic on Apr 10, 2017

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

rasgo-cc on Aug 15, 2016