CODEWITHSUNDEEP
react-bootstrap
kob003
kob003

Reputation: 3737

how to remove the blue background on the "active" NavDropdown.Item while using LinkContainer?

While using LinkContainer in react-bootstrap, the "active" <NavDropdown.Item /> gets blue as it's background-color. for.e.g:

<NavDropdown>
    <LinkContainer to="/profile">
     <NavDropdown.Item>profile</NavDropdown.Item>
    </LinkContainer>
    <LinkContainer to="/">
     <NavDropdown.Item>
      logout
     </NavDropdown.Item>
    </LinkContainer>
</NavDropdown>

How do I remove it and replace it with my own color ?

I tried doing this :

a .active.dropdown-item {
  background-color: white
}

Upvotes: 0

Views: 592

Answers (2)

Martin Ziel
Martin Ziel

Reputation: 11

I have no experience with React-Bootstrap but I guess it's getting the pseudo-class :active.

So you have to do something like:

a:active {
  background-color: white
}

https://www.w3schools.com/cssref/sel_active.asp

Upvotes: 1

kob003
kob003

Reputation: 3737

Solution(let's assume that we want to add green as the background):

  1. For the moment you click the link i.e to show the active link:-

    a.dropdown-item:active{ background-color: green; }

  2. For the color to stay on the active NavDropdown.Item:

    a.active.dropdown-item { background-color: green; } OR

    you could add activeStyle prop in the LinkContainer

    <LinkContainer to="/profile" activeStyle={{ backgroundColor: "green", }} />

Upvotes: 1

Related Questions