賢威グローバルメニューの幅を自動調整する方法

こんにちは、ユウトです。

今回は、賢威でグローバルメニュー(グローバルナビ)の幅を自動調整する方法について、備忘録としてまとめておきます。

カスタマイズする際には、ワードプレス管理画面から、ダッシュボード、外観、テーマの編集、design.cssと進み、バックアップをとっておきます。

【自動調整前】

 

自動調整前

【自動調整後】

 

自動調整後

上の画像のように、グローバルメニューの幅を自動調整するには以下のコードを追記するだけでOKです。

#global-nav ul{
display: flex; /*フレキシブルボックス*/
text-align: center; /*センタリングするかどうか*/
}
 
#global-nav ul li{
width: 300px; /*幅の最大値*/
}

これで、グローバルメニューのバランスがよくなりました。



コメントを残す

サブコンテンツ

このページの先頭へ