I am struggling with my navigation bar, which consists of a simple logo and a few links.
The issue I am facing is that the logo image is too tall for the parent container, which has a fixed height.
It's clear that the logo with the gray background exceeds the desired height of the div:
<nav class="menu-nav container-fluid" style="max-height:50px; background-color:gray;">
<div class="row ">
<a href="#" class="logo-img col h-100 ">
<img src="img/bruke-logo.png" class="mw-100" alt="logobruke">
</a>
<div class="col-7 h-100">
Menu
</div>
<div class="col-2 h-100">
<div class="row ">
<div class="col-6"><i class="fas fa-bell"></i></div>
<p class="col-6 text-right mb-0"><i class="fas fa-user"></i></p>
</div>
</div>
</div>
</nav>