Not able to change color of NavLink (React Bootstrap)

Question

I am having a hard time changing the color of NavLink inside the NavBar when it is inactive and when you hover over it.

  <Navbar className="navbar-spacing justify-content-center"  expand="lg">
        <Navbar.Brand href="#home">
        <img
          src={logo}
          width="270"
          className="d-inline-block align-top"
          alt="Overland NInja Logo"
        />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="on-nav" />
      <Navbar.Collapse id="on-nav">
        <Nav className="mr-auto" >
          <Nav.Link className="inactive"  href="#">Home</Nav.Link>
          <Nav.Link className="inactive"  href="#">Contributors</Nav.Link>
          <Nav.Link className="inactive" href="#">Newsletter</Nav.Link>
          <Nav.Link className="inactive" href="#">Contact Us</Nav.Link>
        </Nav>

        <Nav>
          <Nav.Link className="inactive" href="#">Browse Overlanding Routes</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>

This is my CSS code:

.inactive {
    color: #000;
}

.inactive:hover {
    color: #1D8F32;
}

The style doesn't seem to be applied and the color is not changing at all (Even when it's active and inactive).

The declarations being applied by bootstrap have much more specific selectors than those in your CSS. — ksav, Feb 21 '21 at 01:53
https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles — ksav, Feb 21 '21 at 01:55
I don't think I can use #override NavLink {}. As nav link is a component — Sumanth Jois, Feb 21 '21 at 02:09

ksav · Answer 1 · 2021-02-21T03:15:14.830

You can pass in a bsPrefix prop to replace the generated css class name of the react bootstrap component.

import { Navbar, Nav } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

import "./styles.css";

const customClass = "myCustomNavLink";

export default function App() {
  return (
    <Navbar className="navbar-spacing justify-content-center" expand="lg">
      <Navbar.Toggle aria-controls="on-nav" />
      <Navbar.Collapse id="on-nav">
        <Nav className="mr-auto">
          <Nav.Link href="#" bsPrefix={customClass}>
            Home
          </Nav.Link>
          <Nav.Link href="#" bsPrefix={customClass}>
            Contributors
          </Nav.Link>
          <Nav.Link href="#" bsPrefix={customClass}>
            Newsletter
          </Nav.Link>
          <Nav.Link href="#" bsPrefix={customClass}>
            Contact Us
          </Nav.Link>
        </Nav>

        <Nav>
          <Nav.Link className="inactive" href="#">
            Browse Overlanding Routes
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

// styles.css

.myCustomNavLink {
  color: #000;
}

.myCustomNavLink:hover {
  color: #1d8f32;
}

Note that by doing this, the default class of nav-link is no longer applied. As such, you might need to consider copying other nav-link styles to your custom stylesheet (padding, display, etc).

The other option is just matching or increasing the specificity of the bootstrap selector used for Nav.Link

// styles.css

.navbar-light .navbar-nav .nav-link.inactive {
  color: #000;
}

.navbar-light .navbar-nav .nav-link.inactive:focus,
.navbar-light .navbar-nav .nav-link.inactive:hover {
  color: #1d8f32;
}

Not able to change color of NavLink (React Bootstrap)

1 Answers1