title: How to add background hover color on bootstrap navbar?
body: <p>I am trying to add a background colour to the links when I hover over them
  and change the colour of the social media icons when I also hover them.</p>
  
  <p>I have looked and tried a lot of answers that I've searched for, but still it doesn't work for me when I try.</p>
  
  <p>Can someone please help? Many thanks</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
    &lt;a class="navbar-brand" href="#"&gt; &lt;img src="LOGO.png" class="img-responsive logo"&gt;&lt;/a&gt;
  
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="collapse navbar-collapse" id="navbarText"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Featured&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Brand new&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;a class="navbar-text" href="#"&gt;
        &lt;img src="insta.png" width="30" height="30" alt=""&gt;
      &lt;/a&gt;
      &lt;a class="navbar-text" href="#"&gt;
        &lt;img src="Twitter.png" width="30" height="30" alt=""&gt;
      &lt;/a&gt;
      &lt;a class="navbar-text" href="#"&gt;
        &lt;img src="facebook.png" width="30" height="30" alt=""&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>