Change image height by associating to navbar

Question

I implemented a navbar with a logo at the top, inspired by this site: http://www.fentonandfenton.com.au/.

It turns out that the customer’s logo has another ratio and has bigger height than the collapsed navbar in the mobile version. If I leave it with the required size for the navbar (height = 56px) I lose visibility in the desktop version. The logo is originally 170 X 120.

To make it responsive, the image is encapsulated in a DIV whose height property is at 100%. It may be my ignorance, but I cannot associate this DIV to the . navbar-Fixed-top element. As a way to "set" the height of the DIV according to the . navbar-Fixed-top height, I implemented the Javascript code just below the image.

Follow menu code as explained above. Where can I be missing? What else could you do to resize this image according to mobile/desktop versions?

<div class="navbar-fixed-top navbg">
<div class="container martopbot">
    <!-- Header Logo -->
<div class="row" style="position:relative;background:rgba(255,255,255,0.9);padding-top: 30px; height:100%;">
    <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3" style="text-align:center" id="logohead">
     <a href="/home.php"> 
    <img  class="responsive" src="imagens/logomarca-wunderbar.png" alt="" style="height:100%;margin: auto;">
      </div>
</div>  

<script type="text/javascript" >
var heighResponsive = document.getElementsByTagName(".navbar-fixed-top").height;
$(document).ready(function () {
document.getElementById("logohead").style.height = heighResponsive;}); 
</script>
<div class="row">
<!-- Navigation -->

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header"><style>.sb-search.sb-search-open, .no-js .sb-search{width:120%}</style>
        <div id="dl-menu" class="dl-menuwrapper">
            <button class="dl-trigger" style="margin-right:10px">Open Menu</button>

          <ul class="dl-menu">
            <li><a href="<?php echo $urlSite;?>quem-somos.php">QUEM SOMOS</a></li>
          <li><a href="<?php echo $urlSite;?>loja-virtual.php">LOJA VIRTUAL</a></li>
            <li><a href="<?php echo $urlSite;?>catalogo-estampas.php">CATÁLOGO DE ESTAMPAS</a></li>
            <li><a href="<?php echo $urlSite;?>visualizar_ultima_noticia.php?ipDinamico=noticias.mixtecnologia.com.br&diretorioTemplate=blog&nomeTemplate=spot-noticia.php&qtdeResumo=200&conjuntoCodigoSecao=661">BLOG</a></li>
            <li><a href="<?php echo $urlSite;?>parcerias.php">PARCERIAS</a></li>
            <li><a href="<?php echo $urlSite;?>onde-encontrar.php">ONDE ENCONTRAR</a></li>
            <li><a href="<?php echo $urlSite;?>contato.php">CONTATO</a></li>
            </ul>
        </div>


<script type="text/javascript" >
 // ids need to be unique per page, use different ones if you are including   multiple menus in the same page
 // id of the nav tag, used above
var divTagId = "dl-menu";
 // desired id for 1st <ul> tag 
var ulTagId = "";

// desired class for 1st <ul> tag 
var ulTagClass = "dl-menu";

if ((null !== ulTagId) && ("" !== ulTagId)) {
document.getElementById(divTagId).getElementsByTagName("ul")[0].setAttribute("id",ulTagId);
}
if ((null !== ulTagClass) && ("" !== ulTagClass)) {
document.getElementById(divTagId).getElementsByTagName("ul")[0].className = ulTagClass;
}

</script>
<script type="text/javascript">

jQuery('.search-icon-btn').click(function(){
jQuery("#search-pan").toggle(100);
});</script> 

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>

</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav">

                <li><a href="<?php echo $urlSite;?>quem-somos.php">QUEM SOMOS</a></li>
                        <li><a href="<?php echo $urlSite;?>loja-virtual.php">LOJA VIRTUAL</a></li>
                        <li><a href="<?php echo $urlSite;?>catalogo-estampas.php">CATÁLOGO DE ESTAMPAS</a></li>
                        <li><a href="<?php echo $urlSite;?>visualizar_ultima_noticia.php?ipDinamico=noticias.mixtecnologia.com.br&diretorioTemplate=blog&nomeTemplate=spot-noticia.php&qtdeResumo=200&conjuntoCodigoSecao=661">BLOG</a></li>
                        <li><a href="<?php echo $urlSite;?>parcerias.php">PARCERIAS</a></li>
                        <li class="relativ"><a href="<?php echo $urlSite;?>onde-encontrar.php">ONDE ENCONTRAR</a></li>
                        <li class="megalast"><a href="<?php echo $urlSite;?>contato.php">CONTATO</a></li>

    </ul>           
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

</div>
</div>
</div>