css - 在 Joomla 3.0 中修改 Protostar 模板菜单类

Question

我在 Joomla 3.0 网站上使用 Protostar 模板，并且有一个关于在其 template.css 文件中修改样式的问题，让可折叠的垂直菜单对链接的文本使用相同的类颜色样式/行为我对全 Angular 水平菜单有什么。我不熟悉默认 template.css 文件中指定的所有几十个类(例如，所有 .nav 和 .navbar 类)。通过在 user.css 文件中使用自定义类，我确定了背景颜色，并使其中一种链接文本颜色相同，但我仍坚持需要更改的其余样式。我一直在使用 Firebug，但仍未找到执行此操作的方法。

这是一个 album of six screenshots显示两个菜单的三个阶段。同样，我需要让垂直菜单使用与水平菜单相同的文本样式/行为。

我想通过使用自定义 user.css 文件仅修改相应类所需的样式来解决此问题，因为我不想尽可能直接更改默认的 template.css 文件.

(一个相关的问题，虽然不是那么关键，是如何减少垂直菜单项之间的边距。)

因此，我们将不胜感激任何帮助。这是我需要为这个网站完成的最后一项，所以我很想弄明白。提前致谢!

Answer 1

Joomla 3.x Protostar 使用 Bootstrap 2.3.2v 并为桌面和平板电脑/移动 View 提供不同的 css 样式。 您需要使用引导媒体查询来设置样式。例如:

@media (max-width: 979px) {
     /* menu item color */
    .nav-collapse .nav > li > a,
    .nav-collapse .dropdown-menu a {
        color: #0000ff;
    }

    /* space between menu element */
    .nav-collapse .nav > li > a,
    .nav-collapse .dropdown-menu a {
        padding: 3px 15px;
        margin-bottom: 0;
    }
}

您可以在 documentation 找到有关引导媒体查询媒体查询的更多信息