Documentation
Sidebar Appearance
-
sidebar_color- For sidebar color there are 4 options given below: Values are in string."sidebar_color": "sidebar-white", choices: 'sidebar-white', 'sidebar-dark', 'sidebar-color', 'sidebar-transparent' -
sidebar_type- For sidebar type there are 3 options given below: Values are in array."sidebar_type": "sidebar-mini", choices: 'sidebar-hover', 'sidebar-mini', 'sidebar-boxed', 'sidebar-soft'
With the use of live customizer
Manual
You can change the sidebar layouts with a single action.
-
By adding some
classesin sidebar parent section. Example is given bellow.
Sidebar Menu Color
If you wish to change the sidebar Menu color, you can follow the below action.
For example you have to set sidebar color as dark then you will have to add sidebar-dark class at data-toggle="main-sidebar" of the sidebar.
<aside class=" ...... sidebar-dark">
<aside class=" ...... sidebar-color">
.......
</aside>
<aside class=" ...... sidebar-transparent">
.......
</aside>
<aside class=" ...... sidebar-white">
.......
</aside>
Sidebar Style
If you wish to change the sidebar style, you can follow the below action.
For example you have to set sidebar style as mini then you will have to add sidebar-mini class at data-toggle="main-sidebar" of the sidebar.
<aside class=" ...... sidebar-mini" >
.......
</aside>
<aside class=" ...... sidebar-hover" >
.......
</aside>
<aside class=" ...... sidebar-boxed" >
.......
</aside>
<aside class=" ...... sidebar-soft" >
.......
</aside>
Sidebar Active Menu Style
If you wish to change the sidebar active menu style, you can follow the below action.
For example you have to set sidebar active as rounded then you will have to add navs-rounded class at data-toggle="main-sidebar" of the sidebar.
<aside class=" ...... navs-rounded" >
.......
</aside>
<aside class=" ...... navs-rounded-all" >
.......
</aside>
<aside class=" ...... navs-pill" >
.......
</aside>
<aside class=" ...... navs-pill-all" >
.......
</aside>
<aside class=" ...... navs-full-width" >
.......
</aside>