Sidebar CSS not working
Good afternoon! I am a junior developer working with the metronic platform and I can't seem to make changes to the sidebar CSS. I found the file responsible for the sidebar CSS (_sidebar-light.css) and the code for the sidebar colour and border-bottom (perforated line underneath the logo). I need to change the colour and remove that line. This is the original code:
[data-kt-app-layout="light-sidebar"] {
.app-sidebar {
background-color: var(--kt-app-sidebar-light-bg-color);
border-right: 0 !important;
.hover-scroll-overlay-y {
@include scrollbar-color(var(--kt-app-sidebar-light-scrollbar-color), var(--kt-app-sidebar-light-scrollbar-color-hover));
}
.app-sidebar-logo {
border-bottom: 1px solid var(--kt-app-sidebar-light-separator-color);
}
However, when I alter the background-color and border-bottom, even when adding !important, it does not make a change. Removing the .app-sidebar-logo code also made no difference.
I am currently using a script to change the colour of the sidebar when the page loads, but that is not optimal. It makes menu item highlighting all wrong, so i had to write another script for custom menu item highlighting, but that created other bugs.
Could you please assist me with changing the sidebar colour, removing the border-bottom line and changing the highlighting colour when hovering over and selecting a menu item? I could not figure out what I'm doing wrong.
Looking forward to hearing from you!
Best regards,
Gleb
Replies (1)
Hi,
The theme should not be customized in the assets folder with CSS.
Please customize the theme styles in source folder src/sass/layout/sidebar/_sidebar-light.scss via SAAS variables src/sass/layout/_variables.custom.scss
// Sidebar light
$app-sidebar-light-bg-color: $body-bg;
$app-sidebar-light-bg-color-dark:#131313;
$app-sidebar-light-box-shadow: 0 0 28px 0 rgba(82,63,105,.05);
$app-sidebar-light-box-shadow-dark: none;
$app-sidebar-light-separator-color: $app-header-light-separator-color;
$app-sidebar-light-separator-color-dark: $app-header-light-separator-color-dark;and then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
Regards.
