Topic: Side nav mdb-accordian-item-head active color change

Tim Meyer free asked 3 years ago

Expected behavior color should change based on this .side-nav .collapsible > mdb-accordion-item-head

Actual behavior color will not change even with !important unless the scss is changed within the node module

Resources (screenshots, code snippets etc.)

.side-nav {

.collapsible { .card { .card-header { a { &:hover { background-color: rgba(255, 255, 255, .15); } } } &.active {

mdb-accordion-item-head { background-color:#58595b !important; } .card-header { a { h5 { font-weight: 300; } } } .dark-link { color: #E3E5E7 !important; } } } } }

Damian Gemza staff answered 3 years ago


Where you're trying to overwrite the styles of the sidenav with the above code? Those styles should be overwritten within the global styles.scss stylesheet.

Your code is working fine for me (when i put it into styles.scss). But you're changing the mdb-accordion-item-head background color only when it's active. Active means, that item is clicked.

When I click on specific mdb-accordion-item-head element, it's changing the background-color.

Best Regards,


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

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: Dell
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No