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

Cocoonモバイルメニューカスタマイズカスタマイズ
この記事は約2分で読めます。

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

こんな見た目になります

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

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

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

通常時
通常時
展開時
展開時

トップメニュー用

通常時
通常時
展開時
展開時

カスタマイズの手順

  1. 「Cocoon設定」→「モバイル」からモバイルメニューの設定をする
  2. 追加CSSにコードをコピペ

Cocoon設定

「Cocoon設定」→「モバイル」を開きます。

「モバイルメニュー」から好きなものを選択し、「変更をまとめて保存」を推して保存します。

モバイル設定画面
モバイル設定画面

この設定が済んだら次に、CSSコードをコピペしていきます。

カスタマイズ用CSSコード

下のカスタマイズ用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; /* ナビ中の文字色 */	
}

コメント

タイトルとURLをコピーしました