How to override Side Nav active and hover elements?

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}`
    this.setState({
      [sidenavNr]: !this.state[sidenavNr]
    });
  };

  render() {
    return (
      <Router>
        <MDBContainer>
          <MDBBtn onClick={this.sidenavToggle("Left")}>
            <MDBIcon size="lg" icon="bars" />
          </MDBBtn>
          <MDBSideNav slim fixed mask="rgba-blue-strong" triggerOpening={this.state.sideNavLeft} breakWidth={1300}
            className="sn-bg-1">
            <li>
              <div className="logo-wrapper sn-ad-avatar-wrapper">
                <a href="#!">
                  <img alt="" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" className="rounded-circle" />
                  <span>Anna Deynah</span>
                </a>
              </div>
            </li>

            <MDBSideNavNav>
              <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>
              <MDBSideNavCat name="Instruction" id="instruction" icon="hand-pointer" href="#">
                <MDBSideNavLink>For bloggers</MDBSideNavLink>
                <MDBSideNavLink>For authors</MDBSideNavLink>
              </MDBSideNavCat>
              <MDBSideNavCat name="About" id="about" icon="eye">
                <MDBSideNavLink>Instruction</MDBSideNavLink>
                <MDBSideNavLink>Monthly meetings</MDBSideNavLink>
              </MDBSideNavCat>
              <MDBSideNavCat name="Contact me" id="contact-me" icon="envelope">
                <MDBSideNavLink>FAQ</MDBSideNavLink>
                <MDBSideNavLink>Write a message</MDBSideNavLink>
              </MDBSideNavCat>
            </MDBSideNavNav>
          </MDBSideNav>
        </MDBContainer>
      </Router>
    );
  }
}

export default SideNavPage;

CSS:

.side-nav .collapsible>li a.collapsible-header.active {
  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

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 a.collapsible-header.active {}

.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:

Hi @Stefischer,

In your case use

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

.black-skin .side-nav .collapsible li .collapsible-header.active

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