Logo placement overlapping // Joomla Bootstrap

问题

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">

回答1:

Consider this layout :

<div class="row top-menu-row"> <!-- added .row -->
    <div class="span3"> <!-- added .span3 -->
        <a class="toplogo" href="http://www.lyzarr.com/testsite/" onfocus="blur()" style="z-index: 1; position: absolute;">
            <img style="" src="/testsite/templates/test-template-joomla3-bootstrap_101/images/logo-test.png" title="Zur Startseite" alt="http://www.lyzarr.com/testsite/" border="0">
        </a>
    </div> <!-- end .span3 -->
    <div class="span9 hidden-desktop"> <!-- added .span9 -->
        <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </a>
    </div> <!-- end .span9 -->
    <div class="span9"> <!-- added .span9 -->
        <div class="nav-collapse collapse" style="z-index: 2; height: 0px;">
            <ul class="nav menu  nav-tabs">
<li class="item-101 current active"><a href="/testsite/"><span>Home</span></a></li><li class="item-102 dropdown deeper parent"><a class=" dropdown-toggle" data-toggle="dropdown" href="#"><span>About<b class="caret"></b></span></a><ul class="nav-child unstyled small dropdown-menu"><li class="item-103"><a href="/testsite/about/info.html"><span>Info</span></a></li></ul></li></ul>
        </div>
    </div> <!-- end .span9 -->
</div>

Here logo goes first and menu after it. Because your bootstrap version is 2.3.2 it makes all columns 100% width if device has horizontal resolution 480px and below. Adding following styles will fix the width of your columns in percents regardless of screen resolution:

.top-menu-row .span3
{
    width: 22% !important;
    float: left; 
    height: auto;     
}

.top-menu-row .span9
{
    width: 74% !important;
    float: right;
}

and in media query for devices remove absolute positioning, to make your logo fit in column width:

@media (max-width: 767px) {
    a.toplogo {
        position:relative;
    }
}

来源：https://stackoverflow.com/questions/29803028/logo-placement-overlapping-joomla-bootstrap

标签

css

twitter-bootstrap

Joomla

containers

graphical-logo