How to make an overlapping logo image in a boostrap 4 navbar which is still responsive?

Question

I would like to have an overlapping logo on a bootstrap navbar which is still responsive (changes image size and does not eat hamburger)

---

Good afternoon,

I am using Bootstrap as part of my scaffolding of Laravel Spark and I am struggling with a very specific question:

How can I have an overlapping logo which still is responsive, meaning which still changes its size depending on the viewport?

As you can see in my Codepen, when I add the following, I get the layout I want alright:

.navbar-brand {
    position: absolute;
}

.navbar-toggle {
    z-index:1;
}

However, as you can see when you scale the browser window, this now "eats up" my hamburger icon in terms of responsive design (pun intended). Plus, the logo does not scale like this.

Since I am not 100% fit with CSS and bootstrap, can anypoint help me out please?

Thanks Andreas

Answer 1

I fixed it myself. This is the basis

// HTML    
<a class="navbar-brand" href="{{ route('home') }}">
    <img src="/img/logo.png" class="img-fluid" alt="Responsive image">
</a> 

It only was a CSS issue:

 // CSS
  .img-fluid {
        max-width: 100%;
        height: auto;
        position: absolute;
        top: 0;
    }

Because the Logo looks fine always, I have ommited my strategy to resize the image according to viewscreen.