响应式徽标 - 菜单重叠徽标答案

【问题标题】：Responsive Logo - Menu Overlaps Logo响应式徽标 - 菜单重叠徽标
【发布时间】：2013-08-14 04:07:37
【问题描述】：

我在 Joomla 2.5 的模板上使用 Gantry 该模板最初设置为托管一个小图像作为徽标，但我希望将其更改为宽度更大的图像。

所以，现在它不能在 ipad 上运行，因为它开箱即用，菜单出现在它的顶部。

我希望徽标随着页面视图变大而调整大小，但不与菜单重叠。你能帮我解决这个问题吗？

网址是：http://174.142.32.91/~thanos/example/

提前致谢，

尼克

【问题讨论】：

能否出示相关代码？
是的，就是这个。 /**************************** 标识 ******************** ********/ .logo-block { 填充：0 15px;边距：7px 10px； } #rt-logo { 边距：-9px 0 0 0;宽度：370px；高度：84px；显示：块； }
你需要缩小你的问题范围，而不是把链接放到你的网站上，做一个 jsFiddle。并且不要尝试将代码放入 cmets。
很抱歉。我没有正确理解规则。虽然这不是一个实时站点，但永远不会被使用。我只是把它上传到这里。 jsFiddle 在这种情况下不起作用，因为 css cde 非常复杂（Less Css、Bootstrap 等）
您应该将您的徽标放在标记中的<img> 标记中，而不是作为背景图像，并将您设置的固定宽度更改为#rt-logo { width: 100%;}

标签： css responsive-design

【解决方案1】：

您不能使用固定尺寸并获得您正在寻找的响应式、调整大小的品质。此外，如果要调整大小，则不应使用背景图像。修复代码很简单。

将背景图片作为html图片添加到您的

<div class="rt-block logo-block">
    <a href="/~thanos/example/" id="rt-logo">
        <img src="http://174.142.32.91/~thanos/example/images/example.png" /> // This is your image
    </a>
</div>

接下来，从您的 css 中删除以下内容：

#rt-logo{background:url("../images/logo/logo1.png") no-repeat;}
#rt-logo{margin:-9px 0 0 0;width:172px;height:84px;display:block;}

【讨论】：

你说得对，背景是问题所在。我刚刚从模板设置中禁用了徽标，并在徽标所在的位置添加了一个新模块，其中包含标记上的徽标。

【解决方案2】：

这是因为 gantry 使用背景图像来显示徽标。你有三种方式：

以 css 方式执行：您可以使用CSS3 backgrournd-size property（适用于 IE 9 或更高版本）并进行一些更正。您可以将您的 css 代码放在 templates/gantry/css 文件夹下的 gantry-custom.css 文件中（如果文件不存在则创建该文件），或者您可以编辑 templates/gantry/less 文件夹中的 LESS 文件。
李>
将 gantry 的 logo 功能 覆盖到 img 元素以实现此功能。要覆盖此功能，请将 libraries/gantry/features 中的 logo.php 复制到 templates/gantry/features（如果它不存在）并编辑 render 函数。
禁用龙门的标志功能，并使用带有标志图像作为其内容的模块。

【讨论】：

你说得对，背景是问题所在。我刚刚从模板设置中禁用了徽标，并在徽标所在的位置添加了一个新模块，其中包含标记上的徽标。
我将您的想法添加为其他人看到此问题的解决方案，如果您愿意，也可以作为答案！