sun station sun station - 1 year ago 221
CSS Question

Semantic UI Minimize normal sidebar to icon sidebar

I'm trying to customize the semantic-ui sidebar. I intend to create when i click the toggle button it will minimized to the labeled(icon) one. But it doesn't seems to be animated and the content(push content) doesn't seems to be pulled when i minimized it to the labeled icon sidebar.


<div class="ui left demo vertical inverted visible sidebar menu">
<a class="item">
<i class="home icon"></i>
<a class="item">
<i class="block layout icon"></i>
<a class="item">
<i class="smile icon"></i>
<div class="pusher">
<a href="#" id="toggle-btn">Toggle</a>


$("#toggle-btn").click(function() {
.toggleClass("labeled icon");

And here's the codepen:

Any help would be great!
Thanks in advance.

Answer Source

Checkout this Codepen. Add a class on the .pusher as well to animate it accordingly using jQuery. Also, use CSS transitions insert animations.

For reference,


.ui.left {
  transition: width .2s linear;

.labeled.icon {
  width: 84px !important;

.pusher.push {
  transform: translate3d(84px,0,0) !important;


$("#toggle-btn").click(function() {
  $(".ui.sidebar").toggleClass("labeled icon");

Hope this helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download