0

i am using React-Bootstrap responsive navbar. I want to change the hamburger button's color or change the whole button. how can i change it?

<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav>
      <Nav.Link href="#deets">More deets</Nav.Link>
      <Nav.Link eventKey={2} href="#memes">
        Dank memes
      </Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>
akshay2739
  • 195
  • 2
  • 14

1 Answers1

0

You can change color using css. You have to change stroke value like stroke='rgba%280, 0, 0, 1%29' for black color:

.navbar-toggler-icon {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
}
Sandeep
  • 1,182
  • 3
  • 11
  • 26
  • it just ovewrite the previos button which doesnt look good. – akshay2739 Aug 12 '20 at 10:20
  • look at this question it will help you: [Bootstrap 4 Change Hamburger Toggler Color](https://stackoverflow.com/questions/42586729/bootstrap-4-change-hamburger-toggler-color) – Sandeep Aug 12 '20 at 11:18
  • actually all these answers are for Bootsrap i am talking about react-bootstrap – akshay2739 Aug 14 '20 at 09:17
  • In the background react is using Bootstrap style sheet only. look at this question were font-awesome is used for hamburger icon: [React-Bootstrap: Customize Navbar's hamburger menu](https://stackoverflow.com/questions/58208067/react-bootstrap-customize-navbars-hamburger-menu-with-font-awesome-svg) – Sandeep Aug 14 '20 at 12:02