How to make sidebar always visible in the Semantic UI

Question

How to make sidebar always visible in the Semantic UI? Simply adding the "active" css class works, but messes up page layout.

There is a working example on jsFiddle.

Answer 1

This has been officially fixed.

<div class="ui vertical inverted left visible sidebar menu"> 
  <a class="item">
    <i class="home icon"></i>
    Home
  </a>
  <a class="item">
    <i class="block layout icon"></i>
    Topics
  </a>
</div>
<div class="pusher">This is some content.</div>

Answer 2

This issue is officially fixed since 2015 so the definite answer can be found below.

Just for reference… in 2014 I had to do following things to make this work:

1. add active css class to the sidebar

2. add html code:

   <div class="segment">
       <div class="container" style="margin:1.5em 1.5em 1.5em 325px">
           <!-- content here -->
       </div>
   </div>