title: Change Bootstrap navbar logo image when navbar changes state on hover/scroll
body: <p>I'm using a Bootstrap template that flips the navbar between white and transparent on hover and on scrolling.</p>
  <p>I have a logo image in the Navbar like so.</p>
  <pre><code>&lt;a href=&quot;/&quot; class=&quot;navbar-brand&quot;&gt;
     &lt;img width=&quot;100px&quot; src=&quot;/assets/logo.png&quot; /&gt;
  &lt;/a&gt;
  </code></pre>
  <p>I'd like to be able to load a different logo when the navbar is transparent compared to when it is white.</p>
  <p>I've seen a number of different solutions for doing this outside of Bootstrap but there must be a simpler way to achieve this using Bootstrap classes.</p>
  <p>I need to have both image urls in the html so was thinking of something along the lines of...</p>
  <pre><code> &lt;a href=&quot;/&quot; class=&quot;navbar-brand&quot;&gt;
      &lt;img class=&quot;logo-white&quot; width=&quot;100px&quot; src=&quot;/assets/logo-white.png&quot; /&gt;
      &lt;img class=&quot;logo-dark&quot; width=&quot;100px&quot; src=&quot;/assets/logo.png&quot; /&gt;
   &lt;/a&gt;
  </code></pre>
  <p>But then how can I do something with those new classes based on the set bootstrap classes?</p>