Issues with Mobile Navbar - html

Question

Edit #1: After I give my height a definition of 89px, my mobile menu seems to go behind my content.
I'm having an issue with the mobile version of my navbar. The navbar isn't as tall as logo, so when I click on it my "Home" menu item isn't being shown unless I hover over it.
Here's the pictures for both issues:
Here's my HTML:
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand " style="margin-top: -15px; float: left;" href="#">
<img alt="Brand" class="pull-left" style="margin-left: -15px;" src="Images/logo-resized.png">
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Internet</li>
<li>Phone</li>
<li>Android TV</li>
<li>Shaw Direct</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</nav>
And here's my CSS:
.navbar-default {
background-color: #00AEFE;
}
.nav.navbar-nav li a{
color: white;
font-size: 18px;
line-height: 50px;
}
.col-xs-0 {
display: none;
}
nav {
height: 89px;
}

Answer 1

In bootstrap navbar-brand has some padding, also the height of <img> should be controled by additional css like navbar-brand img {height:40px}.
although if we could see your live html, it was nice.
EDITED
use this CSS to give some height longer than height of your image like 100px or higher
#media (min-width: 768px) {
.navbar-header {
height: 100px;
}
}
OR
If you don't want to change the height of navbar-header you can add some padding to navbar-toggle button so it will add height of navbar-header:
#media (min-width: 768px) {
.navbar-toggle {
padding: 33px 10px;
}
}

Answer 2

<a class="navbar-brand " style="margin-top: -15px; float: left;height:auto" href="#">
<img alt="Brand" class="pull-left" style="margin-left: -15px;" src="Images/logo-resized.png">
</a>
Change the height of navbar-brand class
OR
<style>
.navbar-brand img {
max-height: 40px;
width: auto;
}
</style>