Today I was experimenting with a Bootstrap NavBar and noticed an interesting behavior. When the logo (navbar-brand) is text-only, the hamburger icon stays on the right side. However, when the logo is an image, the hamburger shifts to the left when resizing the browser. It's puzzling me and I can't figure out why.
I am currently enrolled in Angela Yu's Udemy course and have just completed the Bootstrap module. Now, I am attempting to apply what I've learned to create my own website.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<section id="title">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="img/techsnazzy-logo.png" width="30%" height="30%" alt="TechSnazzy Logo" />
</a>
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<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 mr-auto">
<li class="nav-item">Home</li>
</ul>
</div>
</nav>
</div>
</section>