Foundation 6>タイトルバーとメニューアイコンのカスタマイズ

Question

私はFoundationを初めて使い、Foundation 6を使い始めました。以前のバージョンについては何も知りません。

私は画面が小さいときにタイトルバーになる反応性のトップバーを持っています。

あなたがFoundationをよく知っているなら、タイトルバーにはデフォルトでメニューアイコンがあり、トップバーのコンテンツをクリックするとそれを切り替えることができます。もう一度クリックしてください。

私の問題は簡単です。私はメニューアイコンの色を変更する方法はわかりませんが、チュートリアルでFoundation 5を変更する方法を見てきましたが、F6ではそれがうまく機能しませんでした。

また、タイトルバー内のメニューアイコンの位置を変更する方法も知りたいと思います。それを変更したり、一部のウェブサイトで見たようにトップバーのコンテンツを切り替える方法も変わってきます。

F6についてできるだけ多くのことを学びたいと思っているので、追加のヘルプや追加のヒントは非常に高く評価されます。 。（：

ありがとう

Answer 1

あなたは擬似要素クラス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; 
} 

Answer 2

を

財団6メニュー「ハンバーガー」アイコンが

• 1つの2ピクセル高いブロック（上側の線）で構成され、
• このブロックの2つのシャドウは7pxで、14pxは垂直方向（中央と下のライン）にあります。

ので、メニューアイコンの色は、以下のCSSを使用して変更するには：#fecf0fは、変更したい色です

.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; 
} 

。