徽标放置重叠 // Joomla Bootstrap

Question

在我的 Joomla 3.x Bootstrap site 上，我想放置一个与导航栏和幻灯片重叠的徽标，如下所示：

screenshot

导航栏是 "fixed-top" 并且幻灯片放映放置在任何其他容器之外以便以全宽显示。使事情变得更加复杂的是，徽标应该像导航栏一样在滚动时固定在顶部。但在移动设备上，它应该向上移动（同样，就像导航栏一样），甚至被另一个（更小的）图像取代。

这是如何实现的？

徽标 link 到主页，现在通过将 href 和徽标图像本身放在 index.php.

中来完成

要根据视口轻松更改图像，我必须在 css 中进行。可是那怎么link回家呢？

请帮助我正确放置徽标图像（响应式）。

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

Answer 1

考虑这个布局：

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

此处徽标在前，菜单在后。因为您的 bootstrap 版本是 2.3.2，所以如果设备的水平分辨率为 480 像素及以下，它会使所有列的宽度为 100%。无论屏幕分辨率如何，添加以下样式都会以百分比固定列宽：

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

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

并在设备的媒体查询中删除 absolute 定位，使您的徽标适合列宽：

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

徽标放置重叠 // Joomla Bootstrap

Logo placement overlapping // Joomla Bootstrap

css

joomla

containers

graphical-logo

twitter-bootstrap