Bodyclasses
.sidebar-foldedApplies 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, lgand xl. This class hides the sidebar on screens smaller than selected size.
Sidebarclasses
.sidebar-smApplies to.sidebar
Decrease width to 220px. Default is 260px.
.sidebar-lgApplies to.sidebar
Increase width to 300px. Default is 260px.
.sidebar-lightApplies to.sidebar
Change sidebar skin to light version.
.sidebar-darkApplies to.sidebar
Change sidebar skin to dark version.
.sidebar-icons-boxedApplies to.sidebar
Put sidebar icons in a box.
.sidebar-icons-rightApplies to.sidebar
Move icons to the right side of sidebar. It also change how folded sidebar open on hover.
.sidebar-color-*Sidebar headerclasses
.sidebar-header-inverseApplies 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: #XXXApplies to.sidebar-header
Change background color using bg-*classesor apply any background-color using style attribute or your custom css file.
Sidebar menuclasses
.menu-borderyApplies to.sidebar .menu
Add a 4px border-left to selected or hovered menu item.
.menu-xsApplies to.sidebar .menu
Reduce the height of menu items by 14px.
.menu-smApplies to.sidebar .menu
Reduce the height of menu items by 8px.
.menu-lgApplies to.sidebar .menu
Increase the height of menu items by 8px.
.menu-xlApplies to.sidebar .menu
Increase the height of menu items by 16px.