Image is not responsive with class added - twitter-bootstrap-3

Question

as the title says. Here is the code I'm using this theme http://startbootstrap.com/template-overviews/grayscale/
Edit where is the whole code to make it clear:
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<!-- <i class="fa fa-play-circle"></i> <span class="light">Start</span> Bootstrap -->
<img class="img-responsive" src="img/ssmk_logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#weather">Weather Forecast</a>
</li>
<li>
<a class="page-scroll" href="#download">Estate Agent</a>
</li>
<li>
<a class="page-scroll" href="#contact">Stocks</a>
</li>
<li>
<a class="page-scroll" href="#about">About Us</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Answer 1

Should the objective be to get your logo into the Bootstrap navbar, you'll have to resize the image in some way. Your options for that are to do it with CSS, or to make a smaller version of it to be served up to your site. My solution resizes it using CSS.
img {
margin-top: -11px;
height: 40px;
width: 45px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="http://i.imgur.com/9PRm767.png" />
</a>
</div>
</div>
</nav>
Per the documentation for Bootstrap nav branding using images, this is how you add an image to your navbar instead of text for branding purposes. The documentation also says you'll need to either override some CSS depending on your image. My CSS here gets rid of some of the margin the navbar-header creates so the image is nice and flush with the rest of the navbar. Should you want a larger image to be used, you'll need to mess with the width of your navbar.
Using the img-responsive class from Bootstrap is not appropriate here due to the widths of various components in the navbar for Bootstrap, which only collapses down in smaller viewports and does not, itself, dynamically resize along all dimensions as the viewport gets wider. The Bootstrap navbar is easily the most inflexible item in the entire framework, but that's not a bad thing because really, you shouldn't be messing with the size of the navbar too much.

Answer 2

UPDATE
With the correct closing tags that should work. As you can see if you resize Maradona image, it appears to be responsive. I suggest you to validate your entire HTML and check if there is some error on it.
http://jsfiddle.net/xd1p8pov/
Your html (as we see it) is missing one div and one nav closing tags. Have you tried to inspect the .img-responsive class? By default in Bootstrap should be :
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}