Bodyclasses
.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, lgand xl. This class hides the sidebar on screens smaller than selected size.
Sidebarclasses
.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 headerclasses
.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-*classesor apply any background-color using style attribute or your custom css file.
Sidebar menuclasses
.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.