【Cocoon】トップメニュー右寄せのときのナビゲーションの見た目を変えるCSSカスタマイズ

※Cocoonでトップメニュー右寄せのときの実装があんまり気に入らなかったので、ちょっとcssをいじりましたのでそのコードを書いておきます。

注意点として最低限の実装しかしてませんので細部のカスタマイズをしたい場合は自分でブラウザの検証をおこないスタイルを決定してください。

トップメニュー右寄せののときのヘッダーメニューの見た目を変える

まずトップメニュー右寄せのときにどのような問題がおこるか解説します。デフォルトではヘッダーメニューのリスト要素の幅が固定幅になっているためブラウザのウインドウをせばめていくとメニューが2段になってしまいます。これはメニューの幅からリスト要素がはみ出してしまうために2段になるわけです。

width: auto;をつかって固定幅を解除します。

.navi-in>ul li{
position: relative;
width: auto;
}

区切り線はなくてもいいのですが、リストの境界がわからないと微妙なのでリストにposition: relative;を使用して疑似要素で区切り線をつけます。

.navi-in>ul li:before{
content: '|';
position: absolute;
right: -15px;
}

ちなみに最初に固定幅を解除しましたが、これによりリストの余白がなくなります。ですのでul要素にgapプロパティを指定して余白をつけます。ちなみにヘッダーメニューのul要素はフレックスコンテイナーです。ですのでgapプロパティが使用できます。

.navi-in>ul{
gap: 20px;
}

これでリスト同士の余白が確保されます。

※今回紹介してきたコードはCocoonテーマでpcのときに表示されるヘッダーメニューのカスタムスタイルです。

紹介してきたコードは参考程度にしてください。というか自分で修正できない人はこのコードを使わないでください。最低限のコードしか書いていませんので諸処の問題はこのcssコードではとりあつかっていません。

たとえば、ul要素にgapを指定しましたが、これはリストの要素の間隔が確保されますが、それによってリストの子要素であるa要素にも間隔があいてしまいます。実際の実装ではa要素にpaddingを指定する方が通常の対応でしょう。

Cocoonのcssをカスタマイズをするときは人のコードを参考にするよりもまずブラウザの検証をつかってどのようなスタイルが適用されていてどのようなhtml構造になっているか一度自分の目で確かめるべきです。