How to center a logo on my bootstrap navbar [duplicate] - html

Question

This question already has answers here:
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Centering brand logo in Bootstrap Navbar
(7 answers)
Closed 2 years ago.
I'm trying to place a logo on my navbar, right in the center. The navbar automatically stretches to be the same size as the image which I don't want. How do I put a logo on my navbar that overlaps/doesn't stretch the navbar?
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto ">
<li class="nav-item active ">
<a class="nav-link " href="#">Home <span class="sr-only">(current)</span></a>
</li>
<div class="navbar-brand">
<img src = "test-logo.png" height="250" width="250" alt="test logo">
</div>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>

Answer 1

Hello here is the example code for your problem..
.navbar-brand {margin: 0 30px;padding: 0;}
.navbar-brand img {max-height: 68px;}
nav.navbar .navbar-nav li a {
padding: 0 20px;
line-height: 68px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-brand d-block d-md-none">
<img src="https://www.jing.fm/clipimg/full/135-1359070_test-logos-full-logo-with-text-and-simple.png" width="60px" alt="logo" />
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto ">
<li class="nav-item active">
<a class="nav-link " href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Services</a>
</li>
<div class="navbar-brand d-none d-md-block">
<img src="https://www.jing.fm/clipimg/full/135-1359070_test-logos-full-logo-with-text-and-simple.png" alt="logo" />
</div>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>