Luna 主题中的主要导航颜色

Question

这是我的网站 - http://www.afternoons.com.au

我一直在尝试将主导航颜色更改为滚动时和单击页面时的橙色。我发现您必须在后端自定义中更改 'text' 颜色，但这也会更改产品描述的文本。

有没有办法覆盖 CSS 以便产品描述保持灰色，而主导航可以滚动到橙色并在单击时保持橙色？

Answer 1

您可以通过在自定义设计 > 高级 > CSS 的最底部添加以下 CSS 来更改 Luna 主题导航栏 link 的悬停颜色：

#main_nav li a:hover {
  color: #ff0000;
}

只需将颜色替换为您喜欢的任何颜色即可。然后要为每个类别页面激活 "selected" class，您可以执行以下操作：

布局代码中到处都有这样的 link：

<li><a href="http://www.afternoons.com.au/category/vessels">Vessels</a></li>

您需要使用以下格式替换它：

<li {% if page.full_url contains '/category/vessels' %}class="selected"{% endif %}><a href="/category/vessels">Vessels</a></li>

最后，您需要使用这个 CSS：

#main_nav li a:hover, #main_nav li.selected a { 
  color: #FF0000
}