Here is my code snippet:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="vc-transp.png" height="50px" style="margin-left: -30px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="margin-right: 10px;">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html"><b>Dashboard</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="donate.html">Donate</a>
</li>
<li class="nav-item"><a class="nav-link" href="protect.html">Protect</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
</ul>
</div>
</nav>
This is the CSS I am using:
.nav a{
color: white !important;
font-size: 20px;
}
.navbar-brand{
color: white !important;
font-size: 20px;
font-family: sans-serif;
}
My issue is that on some smaller screens, the menu icon shifts down and the navbar becomes taller. How can I resolve this layout problem?