Looking to customize the toggler in React, either by completely changing it or just adjusting the color. Tried solutions from various sources but haven't had any success.
5 Years Ago
1 Year Ago
1 Month Ago
The code appears crossed out in dev tools; could Bootstrap be overriding it?
Here's a snippet of 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>
}
}
Here is my CSS for customizing the <Navbar.Toggle>:
.navbar-light .navbar-toggler-icon {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-512.png");
}
Any assistance would be highly valued