Topic: How to customize sidenav colors ?

GuillaumeDgr premium asked 3 years ago

How to customize ALL sidenav colors with custom colors ? Explained nowhere...

Mikołaj Smoleński staff answered 3 years ago

Here's a short guide of changing sidenav design:

To set background please add sidenav-class property with any MDB Color, for example:

 <mdb-side-nav-2 sidenav-class="grey lighten-3">(...)</mdb-side-nav-2>

To set active/hover color please add color property, like this:

 <mdb-side-nav-2 sidenav-class="grey lighten-3" color="secondary">(...)</mdb-side-nav-2>

To set backdrop color please add backdropClass property. Here's an example:

 <mdb-side-nav-2 sidenav-class="grey lighten-3" color="secondary" backdrop-class="rgba-black-light">(...)</mdb-side-nav-2>

Best regards

GuillaumeDgr premium commented 3 years ago

These are not custom colors as you have only choice in MDB colors, how to really customize everithing pls ?

Mikołaj Smoleński staff commented 3 years ago

We use these colors to make things easier. To make a full customization you just have to inspect the sidenav elements, find the elements you want to customize by class and add new css rules for them. For example: {
    background-color: red !important;

Such task requires skill and is not recommended for users without knowledge of css and the console.

Best regards

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

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 6.7.2
  • Device: Mac book pro
  • Browser: Firefox developers
  • OS: MacOs
  • Provided sample code: No
  • Provided link: No