На моем сайте Bootstrap Joomla 3.x я хочу разместить логотип, перекрывающий панель навигации и слайд-шоу, как это :
Панель навигации имеет «фиксированный верх», а слайд-шоу размещается вне любого другого контейнера, чтобы отображаться в полную ширину. Чтобы еще больше усложнить ситуацию, логотип должен быть закреплен сверху при прокрутке, как панель навигации. Но на мобильном телефоне он должен двигаться вверх (опять же, как панель навигации) и даже заменяться другим (меньшим) изображением.
Как это могло быть достигнуто?
Логотип ссылается на домашнюю страницу, что прямо сейчас делается путем размещения как 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="<?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="#"><?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">