导航栏中的 Bootstrap 徽标延伸到下面的图像横幅上

Question

在下面的代码中，如果徽标的大小增加，导航栏的高度也会增加。

我需要实现的是有一个日志（高度 300 像素），它延伸到导航栏的底部（高度 150 像素）并覆盖下面的图像横幅。

如何实现？

<header class="container-fluid sticky" id="headerSite">
  <div class="container">
    <nav class="navbar navbar-expand-md navbar-light">
      <a class="navbar-brand" href="/"><img src="/logo.png" alt="logo" style="max-width: 120px;"></a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
        <div class="navbar-nav mr-auto">
          menus...
        </div>
      </div>
     </nav>
   </div>
 </header>      
 
 <section class="site-page">
   <div class="container-fluid banner" style="background-image: url('banner.jpg');">
     <div class="container h-100">
       <div class="row h-100 align-items-end">
         <div class="col-12 text-left">
           <div class="row">
             <div class="col-12">
               <h1 class="title">
                 TEXT
               </h1>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   ...
</section>

和CSS...

.site-header { z-index:100; }
.site-footer { z-index:10; padding-top:16px; padding-bottom:8px; }
.site-page { z-index:10; padding-top:128px; padding-bottom:90px; }

#headerSite {
  z-index:100;
  background-color:white;
}

.sticky {
  position:fixed;
  top:0;
  width:100%;
  z-index:9;
}

.banner {
  height: 50vh;
  min-height: 200px;
  max-height: 400px;
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  margin-bottom:16px;
}