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 .collapsible-header.active 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.) https://i.imgur.com/hoIJ6XY.png


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}`
    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


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


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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

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