Brand logo on navbar - what am I doing wrong? - html

Question

Is there a way to dynamically resize the nav-bar brand logo image to go over the nav-bar itself without it losing it's size?
I want it to be fixed on the top of the nav-bar and be over it. I don't want the nav-bar to adjust to the image.
.navbar {
margin-bottom: 0;
border-radius: 0;
border: 0;
background-color: #97CACA;
color: #fff;
padding: 1% 0;
font-size: 1.2em;
}
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0px;
}
.navbar-brand {
float: left;
min-height: 100px;
padding: 0 0px;
}
.navbar-inverse .navbar-nav .active a,
.navbar-inverse .navbar-nav .active a:focus,
.navbar-inverse .navbar-nav .active a:hover {
color: #fff;
background-color: #97CACA;
}
.navbar-inverse .navbar-nav li a {
color: #E2F2E8;
}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="MyNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> <img src="https://preview.ibb.co/cuc7sb/logo_sitters.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>A Nossa Missão</li>
<li>Os Nossos Serviços</li>
<li>Contactos</li>
</ul>
</div>
</div>
</nav>

Answer 1

You can give a position: absolute to your .navbar-brand and remove float: left
Added top: 0 and left: 0 to put it in place. You can change them accordingly.
.navbar-brand {
min-height: 100px;
padding: 0 0px;
position: absolute;
top: 0;
left: 0;
}
Additionally, you need to style your ul after that, because it will be behind your logo
(this is a rough solution)
.navbar-inverse .navbar-collapse ul {
float: right;
}
Example: https://jsfiddle.net/d67y3Ltn/1/