Semantic UI Sidebar Pushes Elements Outside Of Screen Width

I'm not sure if I'm doing something wrong or if this is the intended result but the I'm using semantic ui's sidebar and it pushes everything past the max screen width. Am I missing

Solution 1:

If you don't want the content "pushed" for the Semantic UI sidebars you should use the .overlay class on it - relevant demos

Like the class name suggests, it will overlay the sidebar rather than pushing the content along with it.

Add overlay class to the <div class="ui left vertical menu visible thin attached inverted sidebar"> element.

JSfiddle

Solution 2:

I have used below css to reduce thr width of pusher when sidebar is open. In below code 58px is the width of sidebar

.sidebar.visible + .pusher{
    margin-right: 58px;
}

Solution 3:

Custom CSS subtracting the width of the sidebar would do the trick:

.sidebar.visible + .pusher {
  width: calc(100% - 260px);
}