How to override Side Nav active and hover elements?

Topic: How to override Side Nav active and hover elements?

Stefischer asked 2 years ago

How do you override the color of active and hovered elements in the Side Nav? I've tried grabbing the class .black-skin .side-nav .collapsible li which dev tools inspect element said was causing the unwanted teal color, and using !important to override the color but that didn't work.

Resources (screenshots, code snippets etc.)

Jakub Chmura staff premium answered 2 years ago

Hi @Stefischer, You need to find properly CSS selector to achieve that. I create a simple snippet with custom inline CSS but you can add a custom class or use existing ones and override color. JSX:

import React, { Component } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import "./App.css"
import { MDBSideNavCat, MDBSideNavNav, MDBSideNav, MDBSideNavLink, MDBContainer, MDBIcon, MDBBtn } from "mdbreact";

class SideNavPage extends Component {
  state = {
    sideNavLeft: false,

  sidenavToggle = sidenavId => () => {
    const sidenavNr = `sideNav${sidenavId}`
      [sidenavNr]: !this.state[sidenavNr]

  render() {
    return (
          <MDBBtn onClick={this.sidenavToggle("Left")}>
            <MDBIcon size="lg" icon="bars" />
          <MDBSideNav slim fixed mask="rgba-blue-strong" triggerOpening={this.state.sideNavLeft} breakWidth={1300}
              <div className="logo-wrapper sn-ad-avatar-wrapper">
                <a href="#!">
                  <img alt="" src="" className="rounded-circle" />
                  <span>Anna Deynah</span>

              <MDBSideNavLink to="/other-page" topLevel>
                <MDBIcon icon="pencil-alt" className="mr-2" />Submit listing</MDBSideNavLink>
              <MDBSideNavCat name="Submit blog" id="submit-blog" icon="chevron-right">
                <MDBSideNavLink>Submit listing</MDBSideNavLink>
                <MDBSideNavLink>Registration form</MDBSideNavLink>
              <MDBSideNavCat name="Instruction" id="instruction" icon="hand-pointer" href="#">
                <MDBSideNavLink>For bloggers</MDBSideNavLink>
                <MDBSideNavLink>For authors</MDBSideNavLink>
              <MDBSideNavCat name="About" id="about" icon="eye">
                <MDBSideNavLink>Monthly meetings</MDBSideNavLink>
              <MDBSideNavCat name="Contact me" id="contact-me" icon="envelope">
                <MDBSideNavLink>Write a message</MDBSideNavLink>

export default SideNavPage;


.side-nav .collapsible>li {
  background-color: rgba(255, 0, 0, 0.445);

.side-nav .collapsible>li a.collapsible-header:hover {
  background-color: rgba(200, 20, 216, 0.788);

.side-nav .collapsible li a:hover {
  background-color: rgba(70, 182, 35, 0.719);

Best, Kuba

Stefischer answered 2 years ago

Thank you for responding.

I already mentioned that those CSS classes weren't working, even with using important. Those classes being:

.side-nav .collapsible>li {}

.side-nav .collapsible>li a.collapsible-header:hover {}

.side-nav .collapsible li a:hover {}

I also tried adding a custom ID and ClassName but still no luck. Here is a code snippet of my SideNav component:

Jakub Chmura staff premium answered 2 years ago

Hi @Stefischer,

In your case use

.black-skin .side-nav .collapsible li .collapsible-header:hover

.black-skin .side-nav .collapsible li

and for children of dropdown:

.black-skin .side-nav .collapsible li a:not(.collapsible-header):hover, .black-skin .side-nav .collapsible li a:not(.collapsible-header).active, .black-skin .side-nav .collapsible li a:not(.collapsible-header):active

Best, Kuba

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 React
  • MDB Version: 4.23.1
  • Device: Desktop
  • Browser: FireFox
  • OS: Win10
  • Provided sample code: No
  • Provided link: Yes