Published on July 31, 2018

Fixed Left Sidebar in Oxygen

Sridhar Katakam

Below screencast shows how we can create a layout in Oxygen that has a fixed left sidebar and a scrolling content div on the right.

We shall add a logo and menu in the left sidebar and dynamic title and content in the right.

Notes:

Desktops

Parent Columns Div
height: 100vh
overflow: hidden

Left Div
width: 400px
background-color: #3d4c59
box-shadow: 5px 0 25px 0 rgba(0, 0, 0, 0.15)

Right Div

flex-grow: 1
overflow: scroll (or auto)

Responsive

Parent Div
Stack items vertically from 1120px and below
height: auto

Left Div
Stack child elements horizontally; space-between

Menu
background-color: #3d4c59;

Additional notes

If this method does not work for you as expected for whatever reason, try adding these:

Parent:
flex-wrap: no-wrap

Left Div:
flex-shrink: 0

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-ocalendar-check-omagnifiercrossmenuchevron-downarrow-right