Cocoonのモバイル版メニューのカスタマイズ

Cocoonのモバイル版メニューのカスタマイズ方法を紹介します。

こんな見た目になります

カスタマイズと言っても、どちらも色を変えただけです。

Cocoonではヘッダーフッター用またはトップメニュー用の2種類から選ぶことができるので、

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

トップメニュー用

カスタマイズの手順

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; /* ナビ中の文字色 */	
}