how to change background color in side-nav for predefined sk

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: how to change background color in side-nav for predefined skin

tonyha pro premium asked 6 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 6 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
Write
Create snippet
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: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
tonyha
Pro User Premium support
20Support score
8Questions 5Answers
0Snippets likes 0Snippets