【自分用】Cocoonテーマ使用時のメニューカスタマイズCSS保管庫

Programming Vectors by Vecteezy

Cocoonのテーマのカスタマイズで、主にメニューのカスタマイズCSSを自分が使うとき用に覚え書きしておくための記事。

メニューホバー色の設定

メニューにマウスが移動したときのホバー色の指定とアニメーション指定のCSS

#navi .navi-in a:hover {
  background-color: #ddd;
  transition: all 0.3s ease-in-out;
  color: #fff;
}

 メニューの区切り線

各メニューの区切り線を表示するためのCSS。

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

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

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

まとめ

メニューの各種カスタマイズに関するCSSを保管。

増えたらどんどん追加。