Central Logo That Overlaps Navbar Bootstrap

Hi I am trying to get my navbar to look like this: But I cant seem to figure out how to get the image to be on top of the navbar. I am using bootsrap 5. I havent added any css to

Solution 1:

WORKING DEMO HERE

This CSS should help:

.navbar-brand {
  flex: 01 auto;
  display: block;
  width: 100px;
  height: 100px; 
  position: absolute;
  left: 50%;
  top: 0;
  margin: 0!important;
  padding: 0!important;
  transform: translateX(-50%);
  text-align: center;
}

.navbar-brandimg {
  max-height: 100%;
  max-width: 100%;
}