WordPressでグローバルナビのメニューを均等に表示する方法

下ランキング

メニュー(グローバルナビ)の右側の空白が気になったので、均等表示にしてみました。

web00002
設定前↑のメニュー

フレキシブルボックス(display: flex;)設定を用いて、Wordpressの横並びリスト項目を、均等幅表示する方法の紹介です。

style.cssに下記コードを記述

#navi ul{
display: -webkit-box; /* Android 2~4 */
-webkit-box-pack: justify; /* Android 2~4 */
display: -webkit-flex;
display: -ms-flex;
display: flex; /*フレキシブルボックス*/
text-align: center; /*センタリングは好みで*/
}

#navi ul li{
width: 300px; /*幅は大きめに調節する*/
-webkit-box-flex: 1; /* Android 2~4 */
}

#navi {
    .menu {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        text-align: center;
        li {
            float: none;
            &.menu-item-has-children {
                ul.sub-menu {
                    li {
                        a {
                            text-align: left;
                        }
                    }
                }
            }
        }
    }
}

設定後
web00003
均等幅になりました。

スポンサーリンク

シェアする

フォローする