Cocoonのグローバルメニュー関連のレイアウトメモです。
cssはすべて外部ファイルに記載しています。
cssの挙動は、Cocoon設定のヘッダ＞【ヘッダーレイアウト】で何を選んでいるかによっても変わって来るようです。
うちはけっきょく【センターロゴ（デフォルト）】を選択、メニュー説明欄不使用で落ち着きそうです［2025年4月21日（月）時点］。
グローバルメニュー（PC）の高さを変更する
以下のcssをコピペします。
#navi .navi-in > ul li{
height: 50px;
line-height: 50px;}ふたつの数字は同じ値を設定すること！！
グローバルメニューの説明欄のレイアウト
グローバルメニューの説明欄というのは、外観＞メニューで入力できる説明欄のことです。
.sub-caption{
font-size:0.85em;/*フォントサイズ*/
color:#3a5f54;/*文字色*/}ご自身の環境に置き換えてご利用ください。
グローバルメニュー名を太字にして背景色をつける
以下のcssをコピペします。
.navi-in > ul > li{
font-weight:bold;/*メニューの文字を太字にする*/
background-color:#000000;/*背景色*/}グローバルメニューにマウスオーバー効果をつける
以下のcssをコピペします。
.navi-in > ul > li a:hover{
text-decoration:underline;/*アンダーラインを引く*/
background-color:#dadde5!important;/*背景色*/
color:#fff!important;/*文字色*/
opacity:0.5;/*透明度*/ }アンダーラインを引くのが不要な方は【none】を設定すればOKです。
グローバルメニューのボーダーのレイアウト
以下のcssを参考にしてみてください。
.navi-in > ul > li{border-left:1px solid #bdbdbd;/*左のボーダー*/
border-top:1px solid #bdbdbd;/*上のボーダー*/
border-bottom:1px solid #bdbdbd;/*下のボーダー*/}
.navi-in > ul > li:first-child{border-left:1px solid #bdbdbd;/*左端のボーダー*/}
.navi-in > ul > li:last-child{border-right:1px solid #bdbdbd;/*右端のボーダー*/}- px数はボーダーの太さ、
- 【solid】はボーダーのスタイル（デザイン）、
- 【#bdbdbd】はボーダーの色
です。
適宜ご自身の好みの色やスタイルに置き換えてご利用ください。
おまけ１。フッターメニューのボーダー（区切り線）のレイアウト
以下のcssをコピペすることで、好みのレイアウトにすることができます。
/*フッターメニューの各項目の区切り線（その他と、右端区切り）*/
.navi-footer-in > .menu-footer li {border-left:1px solid #bdbdbd;/*右端以外*/}
.navi-footer-in > .menu-footer li:last-child {border-right:1px solid #bdbdbd;/*右端*/}おまけ２。スマホでグローバルメニューを出すときはどうするか？
グローバルメニューは基本的にPC表示用なので、そのままではスマホで出すことはできません。
スマホレイアウトのときにPC用グローバルメニューの代わりになるものは
スマホミドルメニュー
です！
位置はヘッダーモバイルメニューです！
私のようにハンバーガーメニューに抵抗するマニアックなサイト運営者は、スマホミドルメニュー（ヘッダーモバイルメニュー）を使いこなしましょう（笑）。
スマホミドルメニューは、外観＞メニューで、そのほかのメニューと同じように新規作成・設定すればOKです。
※本記事は私的備忘録です。自己責任でのご利用をお願いします。
