Question

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

导航栏是“固定顶部”，幻灯片放置在任何其他容器之外，以便以全宽显示。更复杂的是，徽标应该像导航栏一样在滚动时固定在顶部。但是在移动设备上它应该向上移动（再次像导航栏一样），甚至被另一个（较小的）图像取代。

如何实现这一目标？

徽标链接到home，现在通过将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">

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>

此处标识首先显示，然后是菜单。因为你的引导版本是2.3.2，所以如果设备的水平分辨率为480px及以下，则所有列都是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

1 个答案: