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

【问题标题】：Foundation 6 > title-bar & menu-icon customizationFoundation 6 > 标题栏和菜单图标自定义
【发布时间】：2016-05-25 18:31:43
【问题描述】：

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

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

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

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

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

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

谢谢。

【问题讨论】：

标签： html css zurb-foundation

【解决方案1】：

Foundation 6 菜单“汉堡”图标由

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

因此，要更改菜单图标颜色，请使用以下 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 是您要更改的颜色。

【讨论】：

如果你使用的是sass，你可以使用变量$titlebar-icon-color: fecf0f;

【解决方案2】：

你需要改变menu-icon类的伪元素::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;
}

【讨论】：