My Bootstrap v4.5.0 navbar is giving me trouble. I am trying to use a logo as the navbar brand, treating it like HTML text. However, I can't seem to replicate it successfully. Despite having other items in my navbar besides just the brand, the image is causing issues by pushing the "Home" and "New Record" links all the way to the right of the bar instead of being placed directly next to the logo. I have tried adjusting padding and CSS properties to fix this, but with no luck so far. Additionally, when resizing the window, the logo shrinks proportionally which is not the behavior I want. Essentially, my two main issues are: 1. incorrect padding of other navbar links next to the logo, and 2. resizing of the logo based on window size. My goal is to make the image behave as closely to plain HTML text as possible. Thank you for any help! Attached is an image illustrating the problems on my page. Please note the logo resizing and improper placement of "Home" and "New Record".
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/">
<img id="logo" alt="Logo" src="${contextRoot}/img/bcore-bride+AI.png" width=8% height=8% />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item"><a href="${contextRoot}/" class="nav-link">Home</a></li>
<li class="nav-item"><a href="${contextRoot}/newRecord" class="nav-link">New Record</a></li>
</ul>
<ul class="navbar-nav ml-auto" style="float: right">
<li class="nav-item"><a class="nav-link" href="${contextRoot}/account">My Account</a></li>
</ul>
</div>
</nav>