navbar smaller than navbar-brand - html

Question

I am looking for a way to have a bigger navbar-brand (bootstrap 4) than the height of the navbar itself. So the navbar-brand should overlap the navbar. Currently it seems that the navbar height is increased to fit the navbar-brand.
My HTML looks like:
<nav class="navbar navbar-expand-lg navbar-custom fixed-top top-menu-4">
<div class="container">
<div class="navbar-brand">
<img src="https://via.placeholder.com/350x170.png" width="350px" height="170px" alt="">
</div>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="none.html">Example 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="none.html">Example 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="none.html">Example 3</a>
</li>
</ul>
</div>
</div>
</nav>
So what I want is something like an overlap:

Answer 1

Give a fixed height to the .navbar and apply transform for .navbar-brand
.navbar {
height: 100px;
background-color: rgba(255, 255,255, 0.9);
}
.navbar-brand {
transform: translateY(calc(50% - 30px));
}
Find the fiddle here

Answer 2

You can set the height of the .navbar to some fixed value and since you're using flexbox on your .container you can align the .nav-brand element to the top of it.
See below for details:
.navbar .container {
height: 100px; /* change this to whatever value you want */
}
.navbar-brand {
align-self: flex-start;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-custom fixed-top top-menu-4">
<div class="container">
<div class="navbar-brand">
<img src="https://via.placeholder.com/350x170.png" width="350px" height="170px" alt="">
</div>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="none.html">Example 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="none.html">Example 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="none.html">Example 3</a>
</li>
</ul>
</div>
</div>
</nav>

Answer 3

You should apply absolute position on your image.
.navbar-brand img {
position: absolute;
top: 10px;
left: 30px;
max-height: 100px;
object-fit: contain;
}

Answer 4

You can simply make the navbar-brand position:absolute...
.navbar-brand {
top:0;
position: absolute;
}
Demo: https://www.codeply.com/go/sJc3uCUL5s