【コピペでできる!】simplicityグローバルナビメニューの中央寄せ

Share

こんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。

本日は、毎度お世話になっているワードプレスのテーマ「simplicity」のグローバルナビメニューをたったの2行で中央に寄せることができるコードを紹介します。

現在利用しているSimplicity2のバージョンは「2.5.2」

simplicityはデフォルトの設定だとこのように左側に寄ってしまっています。

simplicityメニュー

simplicityのグローバルナビメニューは左寄せ

とってもおしゃれなのですがぼくはなんとかして中央に寄せることができないかな〜と考え、ぽちぽちグーグル先生と格闘していましたら出会いました!!

たったのCSS2行でSimplicityのグローバルナビメニューを中央に寄せることができるコードに!!

スポンサーリンク

グローバルナビメニューを中央へ

以下のコードをSimplicityのスタイルシート (style.css)にぺたりとコピペするだけでグローバルナビメニューの中央寄せが実現できます。

#navi-in{
    display: flex;
    justify-content: center;
}

例えばこんな感じになります!!

simplicityメニュー

simplicityのグローバルナビメニューを中央に寄せる

お〜〜〜ついにできた!!! と、感動してしまいました。笑

グローバルナビメニューの中央寄せに迷っていましたら、ぜひこちらのコードを試してみてください!

ワードプレスのテーマによってクラス指定が違う点にご注意を!!

参考【コピペでできる!】「simplicity」に行った10のCSSカスタマイズ

2017.4.19 追記

上記のコードをそのままスタイルシート (style.css)にコピペするとスマホ画面にメニューが強制的に表示されてしまうケースがあったので、その場合は以下のコードでレスポンシブデザイン対応をお願いします。
これをコピペでPCのみの対応になります。試してください!!

@media screen and (min-width: 1024px) {
  #navi-in{
    display: flex;
    justify-content: center;
  }
}

以下の記事でレスポンシブデザインについて書いています。

【コピペでできる!】スマホCSSレスポンシブデザイン対応
PC・タブレット・スマホCSSレスポンシブデザイン対応のための備忘録 こんにちは!!ようこそ、当ブログgcbgardenへ。管理人のs...

この記事を書いた人。
1992年生まれ。フリーなエンジニア。書きたいことを気ままに書いてます!
好きなことは夏の神宮でビール片手に野球観戦、Appleオタ
趣味は、ゴールデン街散策・Web・IT・ものつくりの開発・勉強などなど

スポンサーリンク

Share

Follow