【Wordpress】テーマ：Sydney ヘッダースライダーの位置調整

Question

前提・実現したいこと

WordpressのSydneyというテーマを使用してページ制作を行なっています。
デフォルトはPC表示のヘッダーメニューバーは背景が透過しており、ヘッダースライダーの画像が見えている状態です。
このメニューバーに背景色をつけたいのですが、ヘッダースライダーの画像がその分隠れてしまうので、
メニューバーの高さ分、ヘッダースライダーの画像を下にずらしたいです。

ページのリンクはこちらです。
http://event-performance.net/led_cocoa/

発生している問題

ヘッダースライダー自体は表示する画像が背景画像に指定されており、要素自体を下にずらすことは出来ましたが、
背景画像の表示位置は変わらず、位置を下げた分画像の上部が切れてしまい、
、思うようにヘッダースライダー（の背景画像）の位置が変わってくれません。
（background-positionもいじってみましたが、ダメでした。）

メニュバーの高さの分、ヘッダースライダーの画像の位置を下げる方法をご教授頂ければ幸いです。

どこまでの情報が必要なのか分からなかったため、必要であれば追記致しますので、申し付けください。
よろしくお願いいたします。

＜追記＞
![

Answer 1

CSSで２つご案内いたします。

###１つ目
まず「メニュバーの高さの分、ヘッダースライダーの画像の位置を下げる方法」ということであればこれで済みます。

/* メニュバーをヘッダースライダーに被せずに上部に固定する */
#masthead.site-header {
    position: sticky;
}

しかしヘッダースライダーの高さがメニュバーの分だけ画面より高くなりますし、タイトルもメニュバーの高さの分少し下にずれてしまうという問題が生じます。

これはメニュバーの高さがわからないためにおこる問題です。

###２つ目

次にメニュバーの高さをあらかじめ指定する方法です。

/* メニュバーの高さを指定する */
#masthead {
    height: 100px;
}

/* メニュバーの高さと同じ分だけ、ヘッダースライダーの位置を下に下げる */
.sydney-hero-area {
    margin-top: 100px;
}

/* メニュバーの高さと同じ分だけ、ヘッダースライダーの高さを低くして画面ぴったりにする */
.sydney-hero-area {
    height: calc(100vh - 100px) !important;
}

/* メニュバーの高さと同じ分だけ、タイトルを上に移動させる */
.slide-inner {
    top: calc(50% - 100px);
}

こうすれば先述の問題は起こりませんが、ただしメニュバーの高さを指定しまっているので、スマホに合わせるときに別の高さを指定してやる必要があったり、またフォントサイズを変更するときにも高さを変更しなければならないなど、少しケアが面倒です。

###３つ目
JavaScripotを使えば、「メニュバーの高さを "指定" することなく "計測" して、その分だけ各要素を調整する」ということもできます。

Comments

[K.Kinoshita]

ご回答ありがとうございます。

教えていただいたCSSの方法を２通り試してみましたが、
質問文に追記させて頂いたスクショのように、要素自体をメニューバーの分
下に下げることは出来たのですが、赤枠部分は画像が切れてしまっているんです。

画像が.slide-itemの背景画像に設定されており、その背景画像の表示位置を
background-positionで設定されている箇所をstyle.css内に見つけたのですが、
どれだけ変更してみても動かずでした。

下記がその箇所です。

.slides-container .slide-item {
background-attachment: fixed;
background-position:top;
background-repeat: no-repeat;
background-size: cover;
}

このbackground-positon:top;をtop 120px;に変更してみましたが、
何も変わりませんでした。

[ogyougi]

たしかに微妙ですね。すみません遅くなりまして。１か２に下記を追加した状態ではいかがですか？

.mobile-slide {
display: block;
object-fit: cover;
width: 100%;
}
.slide-item {
background-image: none !important;
}