How to customize sidebar colors

Mono has 2 sidebar colors: sidebar light and sidebar dark.

Sidebar Dark

Sidebar dark is a default sidebar color. You can use image with sidebar dark following the code bellow.


//Default Sidebar Dark
<aside class="sidebar-dark" id="left-sidebar"></aside>

//For image in sidebar
<aside class="sidebar-dark" id="left-sidebar" style="background-image:url(../assets/img/sidebar/sidebar-bg-04.jpg)"></aside>

Sidebar Light

Add class sidebar-light to <aside id="left-sidebar"> and remove class sidebar-light .


//Sidebar Light
<aside class="sidebar-light" id="left-sidebar"></aside>

//For image in sidebar
<aside class="sidebar-light" id="left-sidebar" style="background-image:url(../assets/img/sidebar/sidebar-bg-04.jpg)"></aside>

How to customize sidebar Position

Mono has 2 positions: navbar fixed and navbar static.

Sidebar Fixed

Sidebar fixed position is default position.


//Sidebar Fixed
<body class="sidebar-fixed" id="body"></body>

Sidebar Static

Add class sidebar-static to <body id="body"> and remove class sidebar-fixed.


//Sidebar Static
<body class="sidebar-static" id="body"></body>

How to customize sidebar navigation styles

Mono has 3 navigation styles: expanded, minified, offcanvas.

Sidebar Expanded

Sidebar Expanded is the default navigation style.


//Sidebar Exapnded
<body class="sidebar-fixed" id="body"></body>

Sidebar Minified

Add class sidebar-minified to <body id="body">.


//Sidebar Static
<body class="sidebar-minified" id="body"></body>

Sidebar Offcanvas

For sidebar fixed offcanvas Add class sidebar-fixed-offcanvas sidebar-collapse to <body id="body"> and for sidebar static offcanvas Add class sidebar-static-offcanvas sidebar-collapse to <body id="body">.


//Sidebar Fixed Offcanvas
<body class="sidebar-fixed-offcanvas sidebar-collapse" id="body"></body>

//Sidebar Static Offcanvas
<body class="sidebar-static-offcanvas sidebar-collapse" id="body"></body>

How to remove footer from sidebar

Sidebar comes with a footer by default. If you want to remove the footer you have to remove the class sidebar-with-footer from <div id="sidebar"> and delete html markup of sidebar footer inside the sidebar.


//Sidebar
<div class="sidebar" id="sidebar"></div>

//Delete this Markup
<div class="sidebar-footer">
  <div class="sidebar-footer-content">
    <ul class="d-flex">
      <li>
        <a href="user-account-settings.html" data-toggle="tooltip" title="" data-original-title="Profile settings"><i
            class="mdi mdi-settings"></i></a></li>
      <li>
        <a href="#" data-toggle="tooltip" title="" data-original-title="No chat messages"><i
            class="mdi mdi-chat-processing"></i></a>
      </li>
    </ul>
  </div>
</div>

navbar customization Style customization