Change sidenav bg

Topic: Change sidenav bg

flynic28 free asked 2 years ago

Expected behavior


"styles": [


@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/core/colors';
@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/core/variables';
@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/core/variables-pro';

@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/bootstrap/bootstrap.scss';
@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/mdb.scss';

@import './src/theme/_variables.scss';

@import './src/theme/_overrides.scss';
@import './src/theme/_global.scss';


$sidenav-background-color: black;

I would expect the compiled css in the browser to reflect the updated variable.

.side-nav {
    transition: 0.5s;
    background-color: #2c2f34; // This should be BLACK
    overflow-y: auto;

Actual behavior

No variable is updated

Resources (screenshots, code snippets etc.)

Arkadiusz Idzikowski staff commented 2 years ago

We have recently received several reports regarding problems with variable overwriting. We will take a closer look at this problem and try to fix that as soon as possible.

flynic28 free commented 2 years ago

Is there a timeframe for a potential solution?

Arkadiusz Idzikowski staff answered 2 years ago

There are two workarounds for now:

  1. You can overwrite the background-color property in the .sidenav-bg class instead of updating the scss variable:

mdb-side-nav .sidenav-bg {<br> background-color: red;<br>}

  1. You can use our predefined skin or create custom one:

We can't provide an ETA for the solution for scss variables yet. We will probably need to switch from scss variables to css custom properties, but it would be a breaking change and we would need to add that in one of the major updates.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.7.0
  • Device: Mac
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No