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
classes
in 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>