how to make React-semantic-ui dropdown vertically like on mobile?

Question

I have a stackable menu and dropdown on my website. Everything works fine on a mobile phone, but when I test my website on an ipad, the dropdown menu is not stackable, and some of the content is not shown (eg. About)

Here's how my websites look on each device:

On mobile phone

On Ipad

My code

    <Menu
              fixed="top"
              stackable
              borderless
              fluid
              style={{
 marginTop: '0em', marginRight: 'auto', marginLeft: 'auto',
}}
            >

              <Menu.Item
                style={{
                  textAlign: 'right',
                  display: 'block',
                  fontSize: '1.5em',
                }}
              >
                <Icon
                  onClick={this.handleIconClick}
                > <i
                  className="animated infinite bounce  iconsmind icon-Arrow-Up"
                />
                </Icon>
              </Menu.Item>

              {menu.items.map((item) => {
                if (item.menu_item_parent === '0') {
                  const menuList = menu.items.filter(
                    i => i.menu_item_parent === item.ID.toString(),
                  );
                  if (menuList.length === 0) {
                    return (
                      <Menu.Item
                        as="a"
                        key={item.ID}
                        link
                        href={`/${item.url.split(config.wp_url)[1].slice(0, -1)}`}
                        style={{
                          textAlign: 'Left',
                          display: 'block',
                          fontSize: '1.5em',
                        }}
                      >
                        {item.title}
                      </Menu.Item>
                    );
                  }
                  return (
                    <Dropdown
                      floating
                      item
                      text={item.title}
                      key={item.ID}
                      style={{
                        textAlign: 'Left',
                        display: 'block',
                        fontSize: '1.5em',
                      }}
                    >
                      <Dropdown.Menu>
                        {menuList.map(i => (
                          <Dropdown.Item
                            key={i.ID}
                            href={`/${item.url
                              .split(config.wp_url)[1]
                              .slice(0, -1)}/${i.url
                              .split(config.wp_url)[1]
                              .slice(0, -1)}`}
                          >
                            {i.title}
                          </Dropdown.Item>
                        ))}
                      </Dropdown.Menu>
                    </Dropdown>
                  );
                }
                return null;
              })}
            </Menu>

So how can I make the dropdown drops vertically on ipad as seen on the mobile phone?

Answer 1

As per the latest React Semantic UI Documentation. It is not supported by the react wrapper for semantic ui.

---

Semantic UI stacks menu at mobile, you will need to change that to fit your case

You will need to manually override for the max-width set by semantic-ui-css

Current Styling

@media only screen and (max-width: 767px)
  .ui.stackable.menu .item {
  width: 100%!important;
}

You custom style

@media only screen and (max-width: 800px) // or any width you want stackable menu on
  .ui.stackable.menu .item {
  width: 100%!important;
}

---

⚠️ Note : You should included your css file after importing semantic-ui-css

import 'semantic-ui-css/semantic.min.css';
import './styles/css/Index.css'; // the file that contains custom styling