文章/答案/技术大牛

发布

社区首页 >问答首页 >标志放置重叠// Joomla Bootstrap

问标志放置重叠// Joomla Bootstrap
EN

Stack Overflow用户

提问于 2015-04-22 16:01:40

回答 1查看 836关注 0票数 0

在我的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">

css

twitter-bootstrap

joomla

containers

graphical-logo

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-04-24 09:56:50

考虑一下这个布局：

<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，如果设备的水平分辨率为480 if及以下，则所有列的宽度都是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;
    }
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29803028

复制

相似问题

问标志放置重叠// Joomla Bootstrap
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问标志放置重叠// Joomla BootstrapEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问标志放置重叠// Joomla Bootstrap
EN