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-hidden
Applies to <body>
Make the whole sidebar hidden.
Javascript:
sidebar.hide()sidebar.show()sidebar.toggleHide()
.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-*
Sidebar header classes
.sidebar-header-inverse
Applies to .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 .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.