How to change the bootstrap navbar toggler in React

Question

In React I want to either change the toggler completely or at least change the color. I've tried the solutions on the below links with no luck.

5 Years Ago

1 Year Ago

1 Month Ago

I can see the code in the dev tools but it's crossed out, does this mean it's being overidden by Bootstrap?

Here is my NavBar.js file:

import React, { Component } from "react";
import logo from "../images/logo.png";
import { Nav, Navbar, NavDropdown, Form, FormControl, Button, Container } from "react-bootstrap"
import 'bootstrap/dist/css/bootstrap.min.css';
      
       export default class NewNav extends Component {
       render() {
       return <div className="myContainer">
        <Navbar id="navbar" className="newNav" expand="lg">
        <Navbar.Brand href="/"><img id="logo" src={logo} alt="Company Name"/></Navbar.Brand>
        <Navbar.Toggle className="custom-toggler" aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
                <Nav.Link id="nav-links" href="/cleaning-services">Services</Nav.Link>
                <Nav.Link href="#link">About</Nav.Link>
                <Nav.Link href="#link">Something Else</Nav.Link>
                <Nav.Link href="#link">One more then</Nav.Link>
            </Nav>

                </Navbar.Collapse>
    </Navbar>
        </div>

  }
}

This is my CSS for the custom-toggler in <Navbar.Toggle

.navbar-light .navbar-toggler-icon {
   background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-512.png");
  }

Any help would be appreciated

I can't see any import of your custom css in the head section. I think it's hard to override default Bootstrap css. You would need to set the css property with !important flag. — lortschi, Jan 21 '21 at 18:11
Beacuse I'm using react-router-dom, my CSS is imported on the App.js file. I did try and import the file on NavBar.js but it made no difference. I have also used !important but I didn't want to use it too much as it's not good practice, CSS specificity should be used, but that doesn't seem to work. — Frankinstyyn, Jan 22 '21 at 09:51

score 0 · Accepted Answer · answered Jan 22 '21 at 22:47

In the end I decided to create my own image using Canva and reference the image in the CSS URL and add the !important tag. Details are below is anyone stumbles across this.

.navbar-light .navbar-toggler-icon {
 background-image: url("../src/images/alignRight.svg") !important;
  border-color: var(--secondaryColor) !important;
}

I also changed the border to transparent to get my final button as seen below.

How to change the bootstrap navbar toggler in React

1 Answers1