Creating visible left sidebar menu

[mikemix]

I would like to create "always visible" left sidebar menu for my site. I followed the official docs and created following markup https://jsfiddle.net/mikemix/3pe42jpj/4/

However, as you may see, the content on the right side does not display as it should as the #content takes too much space. How to create such sidebar correctly without trimming the content?

Even the example content at http://semantic-ui.com/modules/sidebar.html#/examples got trimmed.

[jb-san]

removing the pushable class seams to work for me..

[mikemix]

Without the pushable class the sidebar overlaps the content.

[avalanche1]

I confirm, this is a bug. Caused by sidebar's position:fixed and pusher's transform: translate3d(260px,0,0);

[mikemix]

Thx guys

[jlukic]

This isn't a bug, but sidebar content pushes the main page content. This is the expected behavior.

[mikemix]

I followed the docs and it does not work as expected. Am I doing something wrong?

[huseyinkozan]

How to do this without pushing content ?

[nikkwong]

This is an issue. Can this be reopened? Having an 'always visible' sidebar that doesn't push main content is desirable. The semantic docs layout itself is a testament to this.

[thosakwe]

A workaround:

<div class="ui grid container">
  <div class="ui left fixed inverted vertical menu">
    <div class="item">
      <i class="smile icon"></i>
      My Pseudo-sidebar
      </i>
    </div>
  </div>
</div>

This is what I have in my Angular 2 (Dart) app right now, and it seems to work pretty well. The only thing is that it's not a sidebar menu, and thus doesn't have the sidebar plugins available... 😢

<div *ngIf="user != null" class="ui stackable grid" style="height: 100%;">
    <div class="four wide tablet three wide computer column">
        <div class="ui left fixed inverted vertical menu" style="height: 100%;">
            <div class="item">
                {{user.username}}
                <div class="menu">
                    <a class="item" [routerLink]="['/Home']">
                        <i class="home icon"></i>
                        Dashboard Home
                    </a>
                    <a class="item">
                        <i class="heart icon"></i>
                        Manage Subscription
                    </a>
                    <a class="item">
                        <i class="usd icon"></i>
                        Transaction History
                    </a>
                    <a class="logout item">
                        <i class="sign out icon"></i>
                        Log Out
                    </a>
                </div>
            </div>
            <div class="item">
                <i class="desktop icon"></i>
                Applications ({{apps.length}})
            </div>
        </div>
    </div>
    <div class="twelve wide tablet thirteen wide computer column">
        <div style="padding: 1em;">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

[Menci]

This seems to work:

<div>

    <!-- the sidebar -->
    <div class="ui left vertical inverted labeled visible sidebar menu" id="sidebar">
        <a class="item">
            <i class="home icon"></i>
            Home
        </a>
        <a class="item">
            <i class="block layout icon"></i>
            Topics
        </a>
        <a class="item">
            <i class="smile icon"></i>
            Friends
        </a>
        <a class="item">
            <i class="calendar icon"></i>
            History
        </a>
        <a class="item">
            <i class="mail icon"></i>
            Messages
        </a>
        <a class="item">
            <i class="chat icon"></i>
            Discussions
        </a>
        <a class="item">
            <i class="trophy icon"></i>
            Achievements
        </a>
        <a class="item">
            <i class="shop icon"></i>
            Store
        </a>
        <a class="item">
            <i class="settings icon"></i>
            Settings
        </a>
    </div>
    <!-- //sidebar -->

    <!-- the content -->
    <div class="pusher" id="content" style="width: calc(100% - 260px);">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula leo in tellus condimentum suscipit. Integer sed ligula laoreet, auctor nibh ut, consequat risus. Maecenas sed facilisis ipsum. Nullam rhoncus at dolor sed consectetur. Aliquam suscipit risus vitae risus laoreet vehicula. Mauris quis velit tristique, efficitur magna in, facilisis neque. Maecenas vulputate justo nec rutrum iaculis.</p>
        <p>Nulla nec iaculis odio, vitae finibus erat. Integer nec ipsum elit. Quisque malesuada neque purus, et viverra mi sagittis eget. Curabitur lacinia dolor id felis tincidunt vestibulum. Etiam convallis accumsan erat, ac auctor felis auctor sed. Aliquam pellentesque sed mauris ullamcorper aliquet. Nunc vehicula elit vel mi auctor, non lobortis enim tincidunt. Donec eu lectus sem. Donec et ex quam. Nam semper blandit sapien eget ullamcorper.</p>
        <p>Quisque egestas egestas cursus. Pellentesque venenatis tempus aliquam. Phasellus augue est, pulvinar ut sodales in, hendrerit euismod nulla. Nunc elementum ornare mi, at lacinia arcu pellentesque in. Pellentesque metus sapien, feugiat vel sollicitudin eget, ullamcorper id nibh. Integer urna metus, fringilla elementum leo non, fringilla facilisis sem. Suspendisse felis ligula, ultrices eu euismod et, egestas a odio. Phasellus sed elementum ante, et porttitor enim.</p>
        <p>In facilisis pellentesque gravida. Vivamus at magna nulla. Nulla nec viverra felis, in tincidunt odio. Phasellus id lectus ullamcorper, dictum ante a, placerat purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam ut vestibulum neque. Maecenas iaculis ornare sodales. Duis orci ante, sodales in suscipit quis, dignissim vel enim. Ut ultricies justo orci, at condimentum lacus fermentum euismod. Pellentesque vel erat ipsum. Praesent hendrerit ultrices elit ut volutpat.</p>
        <p>Sed posuere lorem non aliquet suscipit. Suspendisse gravida finibus elit. Quisque ullamcorper diam vel enim ultricies porta. Pellentesque nec quam non turpis lobortis cursus. Proin eu est at mi aliquet pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tristique quis est eu vestibulum. Donec et nisi hendrerit, dictum nisi a, aliquet neque. Mauris placerat velit erat, id aliquam lacus lacinia sit amet. Phasellus maximus sapien eget nulla aliquam hendrerit. Aliquam eu porta sem. Fusce eleifend ex enim, ut viverra risus molestie sed. Suspendisse risus quam, hendrerit a dolor vitae, rutrum fringilla risus. Donec vehicula varius nunc, quis congue dolor tempor id. Nulla egestas dignissim est nec ultricies. Curabitur dictum bibendum libero. </p>
    </div>
    <!-- //content -->
</div>    

[bretonio]

I have a similar issue with the sidebar as defined failing to push main content out of the way. My Jade(Pug) markupwoth

.ui.left.vertical.inverted.visible.sidebar.menu
    .item
        .header Andaimes
        .menu
            a.item Bootstrap
            a.item Foundation
            a.item SemanticUI
            a.item Material Design
            a.item PureCSS
    .item 
        .header Plataformas
        .menu
            a.item Ruby
            a.item Python
            a.item Javascript
            a.item PHP
            a.item Go
    .item 
        .header Engenhos
        .menu
            .item Hugo
            .item Hexo
            .item Pelican
            .item Urubu
            .item Jekyll
            .item Assemble
            .item Middleman
            .item Brunch

nav.ui.fixed.menu.inverted.navbar
    a.brand.item(href='#') 
        h5 Organizações Blogo
    a.item(href='#') Televisão
    a.item(href='#') Rádio
    a.item(href='#') Jornais e Revistas
    a.item(href='#') Filantropia
    a.active.item(href='#') Pilantragens
    a.item(href='#') Novelas das Nove
    a.item(href='#') Ali Kamel
.pusher

Yes, I have a horizontal top menu as well. But removing it does not cure the issue. class="pushable" simply pushes all the main content down the page to where the sidebar menu leaves off.

[ghost]

Still not fixed as of today, running Semantic UI 2.2.7.

[koly23]

cant agree more, please reopen this issue and find a way to solve it. Thanks

[PhilLehmann]

Imho the sidebar is a little overkill for that task (and totally misused - it says right there in the description: "A sidebar hides additional content beside a page."), maybe the rail + sticky is better suited... but have at it:

https://jsfiddle.net/zdsvgr14/