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
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;