サイトヘッダーのカスタマイズ手順

以下の 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 が白いので見えなく(見づらく)なってしまう。
  • 検索ボタンも見づらくなってしまう。

→ 透過背景色を暗い色にするのがよい。