本記事ではMax Mega Menuで作成したグローバルナビのメニュー項目をサイトの幅いっぱいに等間隔に並べる方法について説明します．具体的にはMega Menuの設定画面からCSSを追記することで実現します．
Max Mega Menuでサイト幅いっぱいに等間隔に並べる設定方法
①WordPressの管理画面から「Mega Menu→Menu Themes」を選択します．
②一番下のCustom Stylingの部分でCSS Editorに以下のコードを貼り付けます．
|
1 2 3 4 |
/* 同じ幅にするなら以下*/ #{$wrap} #{$menu} > li.mega-menu-item { width: 170px;/* 1070/6=178*/ } |
“同じ幅にするなら以下” からが追記部分ですが，
まず最初の
#{$wrap} #{$menu} > li.mega-menu-item {
で「各メニュー項目」を選択しています．
次にwidthで幅を設定しています．
Simplicity2のメインの横幅は1070pxなので，それをメニュー項目数（今回は6）で割って大きさを求めています．
そのままではマージン分などで少し幅が大きいので，それをよりも少し小さな値を幅に設定します．
③同様にCustom Stylingの部分でTop Level Menu itemsでFontをCenterにします．
④最後に画面一番下の「変更を保存」を押せば完了です．
もし，クリックしたあと正常に変更されず変なページにとんだ場合の対処法は以前の記事に書いたので参考にしてください．
本記事では，グローバルナビのデザインを変更する方法を説明します．上記のアイキャッチ画像の上の状態から下の状態へ変更します．今回グロー...
www.how-to-make-affiliate-blog.com
これで各メニュー項目が等幅になり以下の図のように変更することができます．
あまりデザイン的に今回はフィットしなかった気がしたので，元の状態に戻しましたが，もし同じようにグローバルナビの項目を幅いっぱいに等幅で並べたいときは本記事を参考にしてみてください．
ご一読いただき，ありがとうございました．
