徽标布局重叠// Joomla Bootstrap [英] Logo placement overlapping // Joomla Bootstrap
问题描述
在我的 Joomla 3.x Bootstrap网站上，我想要在导航栏上放置一个徽标，幻灯片样式：
On my Joomla 3.x Bootstrap site I want to have a logo placed overlapping the navbar and slideshow like that:
导航栏是固定顶部，幻灯片放置在任何其他容器外部，以便以全宽显示。
为了使事情更复杂，徽标应该固定在顶部，滚动就像导航栏。
但是在移动设备上，它应该向上移动（再次，像导航栏），甚至被另一个（更小的）图像替换。
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.
？
徽标链接到家，现在通过将href和标志图像本身放在index.php中来实现。
The logo links to home, which right now is done by putting both a href and the logo image itself in the index.php.
要根据视口轻松地改变图像，我必须在css中这样做。但是如何链接到家？
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">
推荐答案
考虑这个布局：
<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>
这里的logo首先是菜单。因为你的引导版本是2.3.2，它使所有列100％宽度，如果设备具有水平分辨率480px及以下。添加以下样式将会修正列的宽度，无论屏幕分辨率如何：
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;
}
和媒体查询设备remove code>定位，以使您的徽标适合列宽：
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;
}
}
这篇关于徽标布局重叠// Joomla Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![屏幕截图](\"http://www.lyzarr.com/stuff/testsite.jpg\"){kind=link}