Topic: how to change background color in side-nav for predefined skin

tonyha premium asked 5 years ago


Hi, I want to change side-nav' s background color and image in pre-defined skin. Is is possible to change ?  

Damian Gemza staff answered 5 years ago


Dear tonyha, You can change the image in pre-defined sidenav by overwriting sn-bg class with new background-image. For example, by Double Navigation layout uses sn-bg-1 class. So I'm overwriting image by using below code:
.sn-bg-1 {

    background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav2.jpg);

}
Also, you can change the background color of your sidenav by using code from below:
.light-blue-skin .side-nav .sidenav-bg::after, .light-blue-skin .side-nav .sidenav-bg.mask-strong::after {

    background: rgba(115, 197, 8, 0.8);

}
You have to modify only skin class if you're using different than light-blue-skin Best Regards, Damian

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags