Keep navbar menu on center when adding a navbar brand - html

Question

I'm having problems keeping the menu items on center when I'm adding a navbar brand.
The menu items move slightly to the right when I'm adding a logo on the left side of the navbar?
How to keep it centered?
Here is my navbar code(bootstrap):
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#"><img class="img-fluid" src="https://psmedia.playstation.com/is/image/psmedia/call-of-duty-warzone-badge-01-ps4-en-27feb20_1583405365530?$HugeHero_Badge$" height="15%" width="15%"></a>
<ul class="navbar-nav mx-md-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">WEAPONS <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LOADOUTS</a>
</li>
</ul>
TEST
</div>
</nav>

Answer 1

With the code you provided here is a quick workaround. It may not be the most organized solution but it should work.
You can also remove the default padding in li tags. That causes things to move a little to the right.
Your Styles.css
/* Set all contents in container to be centered automatically */
#navbarTogglerDemo01 {
position: absolute;
top: 0px;
left: 0px;
width: 100vw;
max-width: 100vw;
display: block;
text-align: center;
}
/* And all direct sub tags display inline block */
.navbar-brand .navbar-nav .button {
display: inline-block;
}
ul {
list-style-type: none;
padding: 0;
}
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#"><img class="img-fluid" src="https://images.pexels.com/photos/176837/pexels-photo-176837.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" height="15%" width="15%"></a>
<ul class="navbar-nav mx-md-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">WEAPONS <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LOADOUTS</a>
</li>
</ul>
TEST
</div>
</nav>
Another quick solution, but not 100% responsive:
/* This will move each block slightly back to the left, remember to provide a unit to move left. */
.navbar-brand,
.navbar-nav {
position: relative;
left: -10px;
/* Change this to your custom amount: px % em ... etc */
}
<nav>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="https://images.pexels.com/photos/176837/pexels-photo-176837.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" height="15%" width="15%">
</a>
<ul class="navbar-nav mx-md-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">WEAPONS <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LOADOUTS</a>
</li>
</ul>
TEST
</div>
</nav>
Please let me know if this helps or in case you have a question.
Good Luck!!