Dynamic Logo Color

Adding the class navbar-brand-dynamic-color to the a.navbar-brand element inside the nav.navbar will cause the SVG logo to fill with a contrasting color. The color is dependent on the color class specified on the .navbar element.

This is beneficial when the sticky navbar is automatically fixed to the window and the bar's color scheme is inverted. The logo color is also then inverted automatically, which means it is then unnecessary to switch between two different logo image files.

This class works only with SVG logos, and works best with monochromatic logos.

If the nav.navbar has class navbar-dark, the logo will be filled with the bg-light color.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand navbar-brand-dynamic-color fade-page" href="index.html">
            <img alt="Jumpstart" data-inject-svg src="assets/img/logos/jumpstart.svg">
        </a>
    </div>
</nav>

---

If the nav.navbar has class navbar-light, the logo will be filled with the bg-dark color.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand navbar-brand-dynamic-color fade-page" href="index.html">
            <img alt="Jumpstart" data-inject-svg src="assets/img/logos/jumpstart.svg">
        </a>
    </div>
</nav>