css - 响应式徽标 - 菜单重叠徽标

Question

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

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

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

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

提前致谢，

缺口

Answer 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;}

Answer 2

那是因为龙门使用背景图像来显示标志。你有三种方式：

1. 以 css 方式进行操作：您可以使用CSS3 backgrournd-size属性（适用于 IE 9 或更高版本）并进行一些更正。您可以将您的 css 代码放在 templates/gantry/css 文件夹下的 gantry-custom.css 文件中（如果文件不存在则创建该文件），或者您可以在 templates/gantry/less 文件夹中编辑 LESS 文件。

2. 将 gantry 的logo 功能覆盖到 img 元素以实现此功能。要覆盖此功能，请将library/gantry/features中的 logo.php 复制到templates/gantry/features（如果它不存在）并编辑渲染功能。

3. 禁用龙门的标志功能，使用以标志图像为内容的模块。