title: ReactJS change the background color of the selected Navlink in a react bootstrap navbar
body: <p>So I have a react-bootstrap navbar. I need to change the background color of the selected nav link. My Css is only coloring around the nav link title and not the whole space occupied by this navlink</p>
  <p>my navbar:</p>
  <p><a href="https://i.stack.imgur.com/oKepQ.png" rel="nofollow noreferrer">mine</a></p>
  <p>How it should be:</p>
  <p><a href="https://i.stack.imgur.com/hhjdp.png" rel="nofollow noreferrer">required</a></p>
  <p>My nav bar code:</p>
  <pre><code>const NavBar = () =&gt; {
  
      let tabs = [
          { name: &quot;Warehouses&quot; },
          { name: &quot;Dispatched to Process&quot; },
          { name: &quot;Sales&quot; },
          { name: &quot;User Manager&quot; },
          { name: &quot;Time Tracking&quot; }
      ];  
      return (
          &lt;&gt;
              &lt;Navbar fixed=&quot;top&quot; bg=&quot;primary&quot; variant=&quot;dark&quot;&gt;
                  &lt;Nav className=&quot;me-auto&quot;&gt;
                      {
                          Object.keys(tabs).map(id =&gt; {
                              return &lt;NavLink className=&quot;my-navbar&quot; to={&quot;/&quot; + tabs[id].name}&gt; {tabs[id].name} &lt;/NavLink&gt;
                          })
                      }
                  &lt;/Nav&gt;
              &lt;/Navbar&gt;
          &lt;/&gt;
      );
  }
  
  export default NavBar;
  </code></pre>
  <p>and finally my nav.css</p>
  <pre><code>.my-navbar{
    height: 100%;
    margin: 15px  15px 15px  15px;
    color: white;
    font-size: 14px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-decoration: none;
  }
  
  .me-auto{
      height: 100%;
  }
  .my-navbar:visited {
    height: 100%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
  }
  
  .active {
    height: 100%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    font-size: 14px;
    background-color: #61fb69;
  }
  </code></pre>