Reduce size of logo on minimum width? - html

Question

On a theme based website, on its final third stage of collapse, it reduces the width of the logo.
However, they have removed all whitespace from their css making it extremely hard to read.
The problem for me is, the logo is just a bit too big (in width) when it collapses on the minimum width and the logo and the navbar don't sit together.
How would I fix this?
Reduce width on this page to see what I mean
Update: Using #joshhunt code, it now squashes the navbar and logo together
CSS (vanilla bootstrap except for):
#media (max-width: 480px) {
.navbar-brand {
max-width: 200px;
height: auto; /* So the image doesn't distort */
}
}
HTML page:
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.htm"><img src="logo.png" alt="SelectUKDeals"></a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Active</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input class="form-control col-lg-8" placeholder="Search" type="text">
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
Update #2: So it went from going like this-
to this
Solution: I didn't add the class="logo" to the image :( It works perfectly now

Answer 1

Use a media query to change the max-width on the logo, for example:
#media (max-width: 480px) {
.logo {
max-width: 200px;
height: auto; /* So the image doesn't distort */
}
}
This would set a max-width of 200px on the "logo" class when the screen width is less or equal to 480px.
I use max-width just in case you change the image and it ends up being smaller or you the image container ends up being smaller and you want it to fit to that (using width: 100%;) but you could just use width and it would probably work just as well.
Update
To make navbar-brand go on a new line you just need to add clear: both (more info on clear) to it inside the media query. For example:
#media (max-width: 480px) {
.navbar-brand {
clear: both;
}
}