Topic: How to customize sidenav colors ?
How to customize ALL sidenav colors with custom colors ? Explained nowhere...
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:
.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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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