# Dynamic Logo Color

Using Jumpstart's utility class, you can automatically set the correct logo color based on navbar color.

###

Add Class to Logo

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>