Layout

...

Default Sidebar

View

...

Icons Boxed Sidebar

View

...

Icons Right Sidebar

View

...

Icons Right Boxed Sidebar

View

...

Folded-1 Sidebar

View

...

Folded-2 Sidebar

View

Menu types

...

Iconic Sidebar

View

...

Bordery Sidebar

View

Skins

...

Light Skin Sidebar

View

...

Dark Skin Sidebar

View

Body classes

.sidebar-folded

Applies to <body>

Make the sidebar so small (width: 80px) and will open on hover.


Javascript:

  • sidebar.fold()
  • sidebar.unfold()
  • sidebar.toggleFold()

.sidebar-expand-*

Applies to .sidebar

* can be one of sm, md, lg and xl. This class hides the sidebar on screens smaller than selected size.

Sidebar classes

.sidebar-sm

Applies to .sidebar

Decrease width to 220px. Default is 260px.

.sidebar-lg

Applies to .sidebar

Increase width to 300px. Default is 260px.

.sidebar-light

Applies to .sidebar

Change sidebar skin to light version.

.sidebar-dark

Applies to .sidebar

Change sidebar skin to dark version.

.sidebar-icons-boxed

Applies to .sidebar

Put sidebar icons in a box.

.sidebar-icons-right

Applies to .sidebar

Move icons to the right side of sidebar. It also change how folded sidebar open on hover.

.sidebar-color-*

Applies to .sidebar

Change color of selected menu item. * can be any of the color names available.


Sidebar header classes

.wa-sidebar-wa-header-inverse

Applies to .wa-sidebar-header

Change colors from white to dark. Also, change background-color to white. You can add you desire background color value.

background-color: #XXX

Applies to .wa-sidebar-header

Change background color using bg-* classes or apply any background-color using style attribute or your custom css file.


Sidebar menu classes

.menu-bordery

Applies to .sidebar .menu

Add a 4px border-left to selected or hovered menu item.

.menu-xs

Applies to .sidebar .menu

Reduce the height of menu items by 14px.

.menu-sm

Applies to .sidebar .menu

Reduce the height of menu items by 8px.

.menu-lg

Applies to .sidebar .menu

Increase the height of menu items by 8px.

.menu-xl

Applies to .sidebar .menu

Increase the height of menu items by 16px.