【WordPress】Cocoonのグローバルメニュー間に区切りを入れる方法

メニューの内側のみに罫線を入れる

１．以下のようなメニューの間に区切りを入れます。

２．ダッシュボードの「外観」をクリックし、「カスタマイズ」を選択します。

３．「追加CSS」をクリックします。

４．以下の部分に、CSSを追加します。

５．以下のCSSを貼り付けます。

#navi .navi-in > ul > li{
  border-right: 1px solid #eee;
}

#navi .navi-in > ul > li:last-child{
  border-right-width: 0;
}

.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
}

６．貼り付けた後、「公開」ボタンをクリックします。

７．結果は以下です。

メニューの大外にも罫線を表示させる場合

１．同じように、以下のCSSを貼り付けます。

#navi .navi-in > ul > li{
  border-left: 1px solid #eee;
}

#navi .navi-in > ul > li:last-child{
  border-right: 1px solid #eee;
}

.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
}

２．結果は以下です。