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

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

以css的方式做到：您可以使用CSS3 backgrournd-size property（适用于IE 9或更高版本）和一些更正。您可以将css代码放在templates / gantry / css文件夹下的gantry-custom.css文件中（如果文件不存在则创建文件），或者可以在templates / gantry / less文件夹中编辑LESS文件。
将gantry的徽标功能覆盖为img元素以实现此功能。要覆盖此功能，请将logo.php从 libraries / gantry / features 复制到 templates / gantry / features （如果它尚不存在）并编辑 render < / em>功能。

禁用龙门架的徽标功能并使用徽标图像作为其内容的模块。

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

2 个答案: