Sidebar and overall layout structure


Hi Guys,

I am having difficulties creating a the desired layout with Semantic UI. I basically like to create a simple structure.

  • A left side bar (always visible, not responsive). In the future I might like to have two side bars, one for smaller screens (just icons) and one for bigger screens (with labels).

  • Right content section, with:

    • Header
    • Some content

Somehow the right content part is always as big as the Viewport, and the size of the Sidebar (150px) is not taken from it. So the Pusher class gets a width thats too big, why is this? How can I fix this? Seems obvious that if you have a sidebar that is always visible, that the main section / content area takes up the rest of the space? (full viewport - width of sidebar).

For an example see:

Als the right content part is sliding in on page load, probably the transform causing this? Would to do to not have this animation of page load?

Next to these problems I would love to know how to achieve my next goals:

  1. the top part (header) of the right content side should be sticky
  2. In the future i’d like a secondary side menu (below the header), but when I add a sidebar it’s not showing, or showing on the wrong place.

Basically I really like the structure of the Semantic UI docs pages… :slight_smile:

Thanks for your effort.



Having the same problem, would like some direction. Got it working by copying over the custom css but was wondering if there was a better way.