Shrink sticky header with logo by adding a class?

Question

I've got a header and add a class is-sticky when scroll-position of the page is greater than 0.

This header contains an img with my logo. I'd like to shrink the height INCLUDING the one of the img when that class is added.

How can I do that? Here's my header's markup and css:

.top-bar {
  position: relative;
  width: 100%;
  z-index: 9999;
  background-color: #FFF;
  opacity: 1.0;
}

.is-sticky {
  top: 0;
  width: 100%;
  z-index: 99999;
  background-color: #fff;
  height: 72px;
}

Here the markup:

<div id="undefined-sticky-wrapper" class="sticky-wrapper is-sticky" style="height: 0px;">
    <div class="top-bar" style="position: fixed; top: 0px;">
        <div class="site-branding">
            <a href="http://localhost:8080/wordpress/" title="MyLogo">
                <img class="site-logo" src="http://localhost:8080/wordpress/logo.png">
            </a>
        </div>
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <div class="menu">
                <ul class=" nav-menu">
                    <li class="current_page_item">
                        <a href="http://localhost:8080/wordpress/">Home</a>
                    </li>
                    <li class="page_item page-item-2066">
                        <a href="http://localhost:8080/wordpress/blog/">Blog</a>
                    </li>
                    <li class="page_item page-item-2">
                        <a href="http://localhost:8080/wordpress/sample-page/">Homepage</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

Answer 1

the css is simply

    .is-sticky{
      height: 10px;
     }

    .is-sticky .site-logo{
        height:8px;
    }

the ".site-logo" will now only get the "height:8px" when it has a parent of any level with class ".is-sticky"

---

edit: Just saw OPs score. Am i misunderstanding the question?