navbar-brand image overlapping nav-items - html

Question

I have the navbar below, but right now, when I open the page on the browser, the items inside ul class="navbar-nav mr-auto" are not displayed entirely because are placed behind the navbar-brand image. Anyone knows how to fix that?
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<a class="navbar-brand pr-3" href="#">
<img th:src="#{/img/banner.jpg}" class="d-inline-block align-top pl-3" alt="Kleber App Store">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse pl-3" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
css for this page
body {
min-height: 75rem;
padding-top: 4.5rem;
}
.navbar-brand img {
top: 0;
position: absolute;
}

Answer 1

You can modify the class and also you dont need position absolute on your CSS file. This action will adjust your image to your layout, trusting you are working with bootstrap, I have removed as well your th:src since it is not necessary as well, check this code below.
<img src="#{/img/banner.jpg}" class="d-inline-block align-top pl-3 img-fluid" alt="Kleber App Store">
By adding to your class img-fluid, your image will adjust to any screen or layout and fit only where it belongs, make sure that image is not that big too and remove the position from your CSS.