title: How to change navbar hover color on bootstrap 4?
body: <p>I need to change my navbar hover color to something else.
  I managed to change navbar text color on my own, but I couldn't find the correct one to change in inspect element for hover color.</p>
  
  <p>Then I looked it up on stackoverflow for previous asnwers but they didn't work for my code. Any input would be greatly appreciated! </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt;Bootstrap 4 Basic template&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
    
  
      &lt;style type="text/css"&gt;
        
        
      html,
      body {
        overflow-x: hidden;
      }
  
  .navbar-light .navbar-brand {
      color: #FFFFFF;
  }
  
  .navbar-light .navbar-nav .active&gt;.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show&gt;.nav-link {
      color: #FFFFFF;
  }
  
  .navbar-light .navbar-nav .nav-link {
      color: #FFFFFF;
  }
  
  
  
  
  
      &lt;/style&gt;
  
  
      
  
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #0275D8;"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" 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="navbarNavDropdown"&gt;
      &lt;ul class="navbar-nav"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Features&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Pricing&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
            Dropdown link
          &lt;/a&gt;
          &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
            &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  
  
  
  
  &lt;footer class="footer fixed-bottom text-center"&gt;
          &lt;span class="text"&gt;Place sticky footer content here.&lt;/span&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  
  
  
  
  
      &lt;!-- Optional JavaScript --&gt;
      &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>