Cocoonのモバイル版メニューのカスタマイズ方法を紹介します。
こんな見た目になります
カスタマイズと言っても、どちらも色を変えただけです。
Cocoonではヘッダーフッター用またはトップメニュー用の2種類から選ぶことができるので、
ヘッダー・フッターモバイルボタン用


トップメニュー用


カスタマイズの手順
- 「Cocoon設定」→「モバイル」からモバイルメニューの設定をする
- 追加CSSにコードをコピペ
Cocoon設定
「Cocoon設定」→「モバイル」を開きます。
「モバイルメニュー」から好きなものを選択し、「変更をまとめて保存」を推して保存します。

この設定が済んだら次に、CSSコードをコピペしていきます。
カスタマイズ用CSSコード
下のカスタマイズ用CSSコードを「追加CSS」にコピペして、カラーコードの部分を好きな色に置き換えます。
追加CSSは、「管理画面→カスタマイズ→追加CSS」で編集できます。

ヘッダー・フッターモバイルボタン用

/* モバイル用ナビゲーション(ヘッダーフッター版) */
#navi-menu-input:checked ~ #navi-menu-content, .mobile-menu-buttons{
background: #c6eeee; /* 背景色 */
}
トップメニュー用

/* モバイル用ナビゲーション(トップメニュー版) */
.slicknav_menu{
background: #c6eeee; /* ナビの背景色 */
}
.slicknav_btn{
background-color: #95e5e2; /* MENUボタンの色 */
}
.slicknav_menu .slicknav_menutxt{
text-shadow: 0 1px 3px rgb(0 0 0 / 45%); /* 「MENU」の文字の影の濃さ */
color: white; /* 「MENU」の文字の色 */
}
.slicknav_nav a{
color: #09123a; /* ナビ中の文字色 */
}