ใน ไซต์ Joomla 3.x Bootstrap ของฉัน ฉันต้องการให้วางโลโก้ซ้อนทับกับแถบนำทางและสไลด์โชว์เช่นนั้น : :
แถบการนำทางเป็นแบบ "คงที่ด้านบน" และสไลด์โชว์จะถูกวางไว้นอกคอนเทนเนอร์อื่นใดเพื่อที่จะแสดงแบบเต็มความกว้าง เพื่อให้เรื่องซับซ้อนยิ่งขึ้น โลโก้ควรอยู่ด้านบนขณะเลื่อนเช่นเดียวกับแถบนำทาง แต่บนมือถือควรจะเลื่อนขึ้น (อีกครั้ง เช่นเดียวกับแถบนำทาง) และถูกแทนที่ด้วยรูปภาพอื่น (เล็กกว่า) ด้วยซ้ำ
สิ่งนี้จะเกิดขึ้นได้อย่างไร?
โลโก้ลิงก์ไปยังหน้าแรก ซึ่งตอนนี้ทำได้โดยการใส่ทั้ง href และรูปภาพโลโก้ใน index.php
หากต้องการเปลี่ยนรูปภาพอย่างง่ายดายตามวิวพอร์ต ฉันต้องทำใน css แต่แล้วจะลิงค์เข้าบ้านยังไงล่ะ?
โปรดช่วยฉันในการจัดวางรูปภาพโลโก้ (ตอบสนอง) อย่างถูกต้อง
.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="/th<?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="/th#"><?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">