Foundation 6 > 标题栏和菜单图标自定义

Question

我是 Foundation 的新手，我开始使用 Foundation 6，对旧版本一无所知。

我有一个响应式顶栏，当屏幕很小时它会变成标题栏。

如果您熟悉 Foundation，您就会知道标题栏默认有一个菜单图标，它允许您在单击顶部栏时切换内容，并在再次单击时将其切换回。

那么我的问题很简单。我不知道如何更改菜单图标的颜色，我看过在 Foundation 5 上更改它的教程，但在 F6 上对我不起作用。

我还想知道如何更改标题栏中菜单图标的位置。甚至改变它的功能或它切换顶栏内容的方式，就像我在一些网站上看到的那样。

任何额外的帮助和额外的提示将不胜感激，因为我想尽可能多地了解 F6。(:

谢谢你。

Answer 1

Foundation 6 菜单“汉堡包”图标包括

• 一个 2px 高的块（上一行）；
• 该块的两个阴影在垂直方向（中线和底线）分别为 7px 和 14px。

因此，要更改菜单图标颜色，请使用以下 CSS：

.menu-icon::after {
    /* the block itself, the first line */
    background: #fecf0f;
    /* middle and bottom */
    box-shadow: 0 7px 0 #fecf0f, 0 14px 0 #fecf0f;
    /* respect WebKit */
    -webkit-box-shadow: 0 7px 0 #fecf0f, 0 14px 0 #fecf0f;
}

#fecf0f你想改变的颜色在哪里。