Currently, I'm facing an issue where my logo is not fitting properly inside my navbar and it's "falling out." You can see the problem here: https://i.sstatic.net/l4T1B.png
Here is the relevant code:
HTML:
<nav class="container-fluid navbar navbar-inverse navbar-static-top" role="navigation">
<ul class="nav navbar-nav">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="/"><img id="navbar-logo" src="/images/logo_only.png"></a>
</ul>
<ul class="navbar-collapse nav navbar-nav navbar-right">
[[if .User]]
<li><a id="currentUser" href="/account/home">[[.User.Username]]</a></li>
<li><a href="/signout">Sign out</a></li>
[[else]]
<li class="[[.SignupActive]]"><a href="/signup">Sign up</a></li>
<li class="[[.LoginActive]]"><a href="/login">Log in</a></li>
<!--li><a href="#">Support</a></li-->
[[end]]
</ul>
CSS:
/* ---------- NAVBAR STYLE -----------
----------------------------------- */
#navbar-logo {
height: 50px;
}
I've been searching for a solution to this problem but haven't had any luck so far. It seems adjusting the height of the navbar manually doesn't solve it. My goal is to have the logo positioned equidistant from the top and bottom of the navbar. Any help would be greatly appreciated. Thank you.