On my Joomla 3.x Bootstrap site I want to have a logo placed overlapping the navbar and slideshow like that:
screenshot
The navbar is "fixed-top" and the slideshow is placed outside any other container in order to being displayed in full width. To make matters even more complicated, the logo should be fix on top while scrolling just like the navbar. But on a mobile it should move up (again, like the navbar) and be even replaced by another (smaller) image.
How could this be achieved?
The logo links to home, which right now is done by putting both a href and the logo image itself in the index.php.
To change the image easily according to the viewport I'd have to do it in the css. But then how to link to home?
Please help me on getting the placement of the logo image (responsive) correctly.
.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">
