Cocoonカスタマイズ ヘッダー編

WordPress無料テーマCocoonのカスタマイズの備忘録です

まずはCocoon設定のヘッダータブから設定をしてからCSSを記述します。
備忘録として書き残そうと思います。

Cocoon設定のヘッダータブ

ヘッダーレイアウト トップメニュー(右寄せ)
高さ80
高さ(モバイル)50
ヘッダーロゴ 幅480px高さ120pxの画像
ヘッダーロゴサイズ 幅240 高さ60
キャッチフレーズの配置 表示しない
グローバルナビメニュー色 グローバルナビ色(お好みの背景色にする、今回は#393f4c)
グローバルナビメニュー幅 メニュー幅をテキストに合わせる

Cocoon設定のモバイルタブ

モバイルボタンレイアウト トップボタン

CSS

.header{
flex-shrink:0;/*ロゴ画像が縮むのを防ぐ*/
}
.header-container{
background-color:#393f4c;/*ヘッダー全体の背景色*/
}
#navi .navi-in > ul > li > a{
padding: 0 .6em;/*グローバルメニュー間の調整*/
font-size:14px;/*グローバルメニューのフォントの大きさの指定*/
font-weight:bold;/*グローバルメニューのフォントを太くする*/
}
#navi .navi-in a:hover {
background-color:transparent;/*グローバルメニューの文字をホバーしたときの色の変化をなくす*/
}
.slicknav_menu{
background-color:#393f4c;/*モバイルメニューの色を合わせる*/
}
@media screen and (max-width: 834px){
.slicknav_btn{
background-color:transparent;/*モバイルメニューの黒の背景色を消す*/
}
.header .site-logo-image{
height:40px!important;/*スマホ表示のロゴサイズ大きさ調整*/
}
}

以上になります。