Di situs Bootstrap Joomla 3.x saya, saya ingin logo ditempatkan tumpang tindih dengan bilah navigasi dan tayangan slide seperti itu :
Bilah navigasinya adalah "atas tetap" dan tayangan slide ditempatkan di luar wadah lain agar dapat ditampilkan dalam lebar penuh. Untuk membuat masalah menjadi lebih rumit, logo harus dipasang di atas sambil digulir seperti bilah navigasi. Namun di perangkat seluler, gambar tersebut akan bergerak ke atas (sekali lagi, seperti bilah navigasi) dan bahkan digantikan oleh gambar lain (yang lebih kecil).
Bagaimana hal ini dapat dicapai?
Tautan logo ke beranda, yang saat ini dilakukan dengan meletakkan href dan gambar logo itu sendiri di index.php.
Untuk mengubah gambar dengan mudah sesuai dengan viewport saya harus melakukannya di css. Tapi lalu bagaimana cara menghubungkan ke rumah?
Mohon bantuannya untuk mendapatkan penempatan gambar logo (responsif) dengan benar.
.logo-wrapper {
position: relative;
z-index:1;
}
.toplogo {
position:absolute;
width:auto;
height:auto;
z-index:10;
left: 0px;
top: 0px;
}<body id="<?php echo ($itemid ? 'itemid-' . $itemid : ''); ?>">
<div id="toplogo">
<a href="/id<?php echo $root = JURI::root();?>" onfocus="blur()">
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo-test.png" title="Zur Startseite" alt="<?php echo $root = JURI::root();?>" border="0"/>
</a>
</div>
<!-- Begin Navbar-->
<?php if ($this->countModules('position-9')): ?>
<div class="navbar navbar-inverse navbar-fixed-top">
<!-- navbar-inverse navbar-fixed-top -->
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!--<a class="brand" href="/id#"><?php echo $sitename ?></a>-->
<div class="nav-collapse collapse">
<jdoc:include type="modules" name="position-9" style="none" />
</div>
</div>
</div>
</div><!--End navbar-->
<?php endif; ?>
<?php if ($this->countModules('position-5')): ?>
<div class="bigimage">
<jdoc:include type="modules" name="position-5" style="none" />
<div class="clearfix"></div>
</div><!--End Bigimage-->
<?php endif; ?>
<div class="container">
<!-- Begin Header-->
<div class="header">
<div class="header-inner">