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

Question

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

我有一个响应式顶部栏，当屏幕很小时，该栏变为标题栏。

如果您熟悉Foundation，您将知道标题栏默认情况下具有菜单图标，该菜单图标使您可以在单击时从顶部栏中切换内容，并在再次单击时将其切换回原处。

好吧，我的问题很简单。 我不知道如何更改菜单图标的颜色，我看到了在Foundation 5上进行更改的教程，但是在F6上它对我不起作用。

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

非常感谢任何其他帮助和其他提示，因为我想尽可能多地了解F6。 （：

谢谢。

Answer 1

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

• 1个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是要更改的颜色。

Answer 2

您需要更改menu-icon类的伪元素::after的颜色， ::after此处可以使用位置和样式，因此可以例如执行以下操作：

.menu-icon::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    bbackground: red;
    background-size: 150%;
    background-position: 7px 11px;
    background-repeat: no-repeat;
}