Implemented a navbar with a logo on the top, inspired by this site: link .
It occurs that the client's logo has another aspect ratio and is taller than the collapsed navbar in the mobile version. If I leave it with the required size to navbar (height = 56px) I lose visibility in the desktop version. The logo originally had 170 X 120.
To make responsive, the image is encapsulated to a DIV whose height property is as 100%. It may be unknown to me, but I can not associate this DIV with the .navbar-fixed-top element. As a way to "set" the height of the DIV according to the height of .navbar-fixed-top, I implemented the Javascript code just below the image.
Follow the menu code as explained above. Where can I be going wrong? What else could you do to resize this image according to the 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>