Bootstrap navbar-brand logo overlapping on collapse - html

Question

So I've made a typical Bootstrap navbar and it works well on Desktop sizes. By default, when I added my logo wrapped with the navbar-brand class as in their documentation example, the logo overhangs off the navbar. I solved this problem by adding padding to the links themselves. This works fine until I resize the browser to act like a mobile device. When it collapses, the navbar's height decreases to fit the toggle switch and the logo again overhangs. How to I fix this? Did I go about making the height of the navbar the right way by adding padding? Or should I make it a fixed height by specifically assigning it?
The logo is 55px tall by 128px wide.
Here's my HTML:
<nav id="LC-navbar" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div id="LC-navbar-header" class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#LC-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="LC-navbar-brand" class="navbar-brand img-responsive" href="../">
<img class="img-responsive" src="../assets/img/logo-horizontal.png">
</a>
</div>
<div id="LC-navbar-collapse" class="collapse navbar-collapse">
<ul id="LC-navbar-links" class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="active">Shop</li>
<li>Our Team</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
And CSS:
#LC-navbar {
background-color: #202020;
border: none;
}
.navbar-brand {
padding-left: 30px;
}
#LC-navbar-links {
padding-right: 20px;
}
#LC-navbar-links li {
padding: 16px 10px;
}
#LC-navbar-links a {
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
color: #c0c0c0;
-webkit-transition: color 0.25s;
-moz-transition: color 0.25s;
-o-transition: color 0.25s;
transition: color 0.25s;
}
#LC-navbar-links a:hover {
color: #BE1E2D;
}
#LC-navbar-links .active > a {
color: #BE1E2D;
background: none;
}
#LC-navbar-links .active > a:hover {
color: #BE1E2D;
background: none;
}
How would I go about changing styles to the navbar when it's collapsed? Obviously to change the overhang problem but also if say I want it to have a different background color when collapsed vs when open?

Answer 1

The toggle menu appears lesser than the width of 768px, so use the max-width: 768px media-query.
#media (max-width: 768px) {
.navbar-brand {
height: 80px; // Logo will not overhang
}
#LC-navbar {
background-color: #ccc; // Change background color
}
.navbar-toggle {
margin-top: 25px; // Adjust toggle position
}
}