Semantic UI: Make vertical menu (sidebar) collapse in tablet and mobile view

Question

I'm building an HTML + CSS design based on Semantic UI and I was able to make pretty much any element responsive by using the class stackable .

However the left vertical menu, which I use as a visible sidebar, won't collapse in tablet and mobile view.

The result I need is exactly like the Semantic UI Docs page: the sidebar visible in desktop and landscape tablet and hidden, but toggleable, in portrait tablet and mobile.

Here's my code:

<div class="ui left vertical menu collapsible main sidebar visible desktop only">
    <div class="transparent-bg">
        <div class="ui center aligned basic sideheader segment">
            <h2 class="ui header">Dashboard</h2>
        </div>
        <a class="bold item">
            <i class="building outline icon"></i>Add Item
        </a>
        <a class="active item">
          Item 1
        </a>
        <a class="item">
          Item 2
        </a>
        <a class="item">
          Item 3
        </a>
    </div>
</div>

Any idea on how I can achieve this? There's no documentation on the official docs page.

Many thanks!

Answer 1

我不使用语义UI，但是您是否检查过https://semantic-ui.com/modules/sidebar.html ？