How to customize sidenav colors ?


Topic: How to customize sidenav colors ?

GuillaumeDgr pro premium asked 4 years ago

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


Mikołaj Smoleński staff answered 4 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 pro premium commented 4 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 4 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:

.mdbvue-sidenav__item.active {
    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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • 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
Tags