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

tonyha 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(;

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.


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 Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No