サイトヘッダーのカスタマイズ手順
以下の CSS を追加すると、このページのようにサイトヘッダーを透過にすることができます。
サイト全体でサイトヘッダーが透過になり、スマホ閲覧時にも透過になります。
body #site-header {
background-color: rgba(0,0,0,0.35);
}
body.header_scrolled #site-header {
background-color: rgba(0,0,0,0.5);
}
body:not(.header_scrolled) #site-header {
position: absolute;
}
body .page-header {
min-height: min(400px, 50vw);
padding-top: 60px;
}
body .page-header,
body.home .site-body {
margin-top: 0 !important;
}
注意
サイトヘッダーの透過背景を白にすると、以下の問題が生じるので要注意。
- タブレットでサブメニューを開くボタン .vk-menu-acc .acc-btn が白いので見えなく(見づらく)なってしまう。
- 検索ボタンも見づらくなってしまう。
→ 透過背景色を暗い色にするのがよい。