Superimpose logo on Navbar using CSS

I am trying to achieve something of the following effect using bootstrap where the logo overhangs the nav bar:

I've got the following set up right now using a placeholder image:

    <header class="header">          <div class="container-fluid">    <nav class="navbar navbar-expand-lg">  <div class="col-lg-3 header__menu mobile-menu">          <ul>              <li class="active"><a href="/">Home</a></li>              <li class="active"><a href="/portfolio">Portfolio</a></li>          </ul>  </div>  <div class="col-lg-6 position-relative">          <a class="mx-auto" href="">              <img style='width: 300px;' src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Wikipedia_svg_logo.svg/1024px-Wikipedia_svg_logo.svg.png" alt="">          </a>          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">              <span class="navbar-toggler-icon"></span>          </button>  </div>  <div class="col-lg-3 header__menu mobile-menu">          <ul>              <li class="active"><a href="/about">About</a></li>              <li class="active"><a href="/contact">Contact</a></li>          </ul>  </div>  </nav>              </div>              <div id="mobile-menu-wrap"></div>          </div>      </header>    

Here is the codesandbox including the custom CSS from a template where you'll see that the navbar lays out and the image displays but the navbar still inherits the whole size of the image:

https://codesandbox.io/s/dreamy-wing-gzyxv

https://stackoverflow.com/questions/65432788/superimpose-logo-on-navbar-using-css December 24, 2020 at 09:06AM