How to make sidebar always visible in the Semantic UI

css semantic-ui
emix picture emix · Jan 22, 2014 · Viewed 12.4k times · Source

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

Jan picture Jan · Nov 10, 2015

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>

Related questions

Center div on the middle of screen

What is the best pattern to align a semantic ui grid in the middle of the screen? the css for this will ideal be this one. .div{ position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100…

Read More
Semantic UI centre aligned login box?

I am using the Semantic UI framework for my website. I want to place the login box in the centre of the page.I want only the login box in the page. I don't understand how to centre aligned using …

Read More
Vertical alignment of a div using Semantic-UI

I can't seem to find it anywhere in the docs. Is there a way to vertically center a div on the page using Semantic-UI semantics :) Here is what I'm trying to do: <div class="ui centered grid"> <…

Read More