How to make the png image visible properly in the navbar - html

Question

I'm trying to add a logo to the navigation bar, but the logo I am trying to add is not displayed properly.
I've tried setting width and height, it stretches but it doesn't render properly, and the text written in the image is also not readable.
But when I use another different png image it is visible properly, for example when using this .png file https://www.logomakr.in/img/logo-design2.png, it is displayed properly and is visible.
body {
font-family: "Open Sans", sans-serif;
color: #444444;
}
#header {
background: #fff;
transition: all 0.5s;
z-index: 997;
padding: 15px 0;
box-shadow: 0px 2px 15px rgba(25, 119, 204, 0.1);
}
#header.header-scrolled {
top: 0;
}
#header .logo {
font-size: 30px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
letter-spacing: 0.5px;
font-family: "Poppins", sans-serif;
}
#header .logo a {
color: #2c4964;
}
#header .logo img {
max-height: 40px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar>ul>li {
position: relative;
white-space: nowrap;
padding: 8px 0 8px 20px;
}
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: #2c4964;
white-space: nowrap;
transition: 0.3s;
border-bottom: 2px solid #fff;
padding: 5px 2px;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #1977cc;
border-color: #1977cc;
}
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<a class="logo me-auto" href="#">
<img src="https://toppng.com/uploads/preview/logo-design-concept-for-huebris-sample-logo-image-11563507273imdbiqdnjt.png">
</a>
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li>
<li><a class="nav-link scrollto" href="#departments">Events</a></li>
<li><a class="nav-link scrollto" href="#departments">Contact Us</a></li>
<li><a class="nav-link scrollto" href="#doctors">Careers</a></li>
</ul>
</nav>
<!-- .navbar -->
</div>
</header>
<!-- End Header -->
What is causing this behavior? How to do it properly?

Answer 1

Just make the image rectangular, scale it decently and please erase that grey background so that it'll look good.
Then wrap that up using navbar-brand and img-fluid classe as shown here: https://getbootstrap.com/docs/5.1/components/navbar/#image