前略、やなぎさん

以下のCSSを適用すると、どうでしょうか？

ちょっと、やってみないと何とも・・

@media screen and (max-width: 834px) {

    #navi .navi-in > .menu-mobile li {
        height: 60px;
    }

    #navi .navi-in > .menu-mobile > .menu-item-has-description > a > .caption-wrap {
        height: 60px;
    }

}

やなぎさん

ご質問とは別ですが、以下のCSSを適用すると、ヘッダーの背景画像がどの画面幅でも、同じアスペクト比で表示されるかと思います。

#header {
    height: 45vw;
}

@leafytree 

リフィトリー様

グローバルナビメニュー高さ変更のCSSタグをご教示いただき、ありがとうございます！
ご教示いただきましたタグで無事に理想の太さにすることが出来ました。
大変感謝しております。

また、ヘッダー背景の件についてもご教示いただきありがとうございます。
こちらについて１点質問なのですが、以前別トピックで質問させて頂いた際に教えていただいたCSSタグがあるのですが、リフィトリー様よりご教示いただいたタグを使用する際はこちらを削除してから反映したほうがよいのでしょうか？

https://wp-cocoon.com/community/postid/56619/

▼教えて頂いたCSSタグ

@media screen and (max-width: 834px) {
  .home .header-in {
    height: 300px;/好みの高さ*/
  }
}

やなぎさん

以前のトピックではるさんがご案内くださったコードですね。

はるさんのコードは、閲覧するデバイスの画面幅が834px以下のとき、ヘッダーの高さを300pxにする、というものです。

以下のコードは、おおまかに説明すると閲覧する画面幅を100とするとヘッダーの高さを45にする、というものです。

#header {
    height: 45vw;
}

つまり、閲覧する端末の画面幅によってヘッダー画像の横と縦の比率を一定に保って表示する、ということになります。

おっしゃるとおり、お好みで、どちらか片方を利用するようになさってください。

やなぎさん

例えば、ipadで縦表示のとき、現在は上の画像のようになっていますが、比率を保つことにより、下の画像のようになります。

@leafytree 

リフィトリー様

ご丁寧に写真付きでご説明いただき、ありがとうございます！

度々の質問で申し訳ないのですが、リフィトリー様よりご教示いただきましたタグをしようしたところ、
ipad proでの表示だとグローバルナビメニューとの間に余白が出来てしまいました><

モバイル・ipadの見え方は教えて頂いたタグの表示が良いので、
こちらのタグを使用したいのですがipad pro表示の際にできてしまう余白については
何かCSSで指定して削除できるものなのでしょうか？

何度もお聞きしてしまいすみません！

やなぎさん

２枚の画像を使い分けていたんですね。

だとすると少しCSSのコードを変えなくてはならないので、少しお待ちくださいませ。

@leafytree 

リフィトリー様

すみません！こちらに関してはモバイル版での表記に上手くいかなかったため、
画像を少しサイズを変えて使い分けておりました！

なので、同じ画像に統一することは可能です！

ちなみに現在下記のように３種類の背景ヘッダー画像を使い分けています。

A.PC用トップページ背景ヘッダー画像
B.PC用トップページ以外の背景ヘッダー画像
C.モバイル用トップページ背景ヘッダー画像（1.のサイズ違い）

なお「B.PC用トップページ以外の背景ヘッダー画像」はモバイル版では非表示になるように
「cocoon設定」→「ヘッダー」→「高さ(モバイル)」で設定しています。

上記を踏まえ２つ質問がございます。

①上記AとCの画像を同一のものに設定し直した場合、先ほどご教示いただきました下記タグで解決しますでしょうか？

#header {
    height: 45vw;
}

②上記タグを使用したところ、Bのトップページ以外では非表示にしていたページでも背景画像が表示されるようになってしまいました。
こちらを非表示に戻すことは可能なのでしょうか？

とても細かいことをお聞きしてしまいすみません。
説明が分かりづらい部分がありましたら、ご指摘いただけますと幸いです。
宜しくお願い致します。

やなぎさん

トップページのヘッダーの背景画像はPCとモバイルの２種類でイケそうです。

子テーマのCSSの以下の記述の部分を

/*トップページ*/
.home .header{
background-image: url('https://moena-y.com/wp-content/uploads/2021/09/8818d4830dac5e2ade9f9587fc9ba1a4.jpg');/*もしくはテーマ設定で設定したもの*/
}
.home .header-in{
height: 750px;/*好みの高さ*/
}

@media screen and (max-width: 834px) {
.home .header{
background-image: url('https://moena-y.com/wp-content/uploads/2021/09/8818d4830dac5e2ade9f9587fc9ba1a4-1-e1631882193154.jpg');/*もしくはテーマ設定で設定したもの*/
}


#header {
height: 45vw;
}

以下のコードに差し替えてみてください。

/*トップページ*/
.home .header {
    background-image: url('https://moena-y.com/wp-content/uploads/2021/09/8818d4830dac5e2ade9f9587fc9ba1a4.jpg');/*もしくはテーマ設定で設定したもの*/
}

.home .header-in {
    height: 50vw;
}

@media screen and (max-width: 834px) {
    .home .header {
        background-image: url('https://moena-y.com/wp-content/uploads/2021/09/8818d4830dac5e2ade9f9587fc9ba1a4-1-e1631882193154.jpg');/*もしくはテーマ設定で設定したもの*/
    }

    .home .header-in {
        height: 44vw;
    }
}/*834px以下ここまで*/

やなぎさん

上記のコードは大幅に変えていますので、一部を抜粋せずに、その部分をそっくり差し替えてください。

やなぎさん

もう一度書き込みます。

以下の部分をそっくり・・

/*トップページ*/
.home .header{
  background-image: url('https://moena-y.com/wp-content/uploads/2021/09/8818d4830dac5e2ade9f9587fc9ba1a4.jpg');/*もしくはテーマ設定で設定したもの*/
}
.home .header-in{
  height: 750px;/*好みの高さ*/
}

@media screen and (max-width: 834px) {
	.home .header{
  background-image: url('https://moena-y.com/wp-content/uploads/2021/09/8818d4830dac5e2ade9f9587fc9ba1a4-1-e1631882193154.jpg');/*もしくはテーマ設定で設定したもの*/
}


#header {
    height: 45vw;
}

以下のコードに差し替えてみてください。

/*トップページ*/
.home .header {
    background-image: url('https://moena-y.com/wp-content/uploads/2021/09/8818d4830dac5e2ade9f9587fc9ba1a4.jpg');/*もしくはテーマ設定で設定したもの*/
}

.home .header-in {
    height: 50vw;
}

@media screen and (max-width: 834px) {
    .home .header {
        background-image: url('https://moena-y.com/wp-content/uploads/2021/09/8818d4830dac5e2ade9f9587fc9ba1a4-1-e1631882193154.jpg');/*もしくはテーマ設定で設定したもの*/
    }

    .home .header-in {
        height: 44vw;
    }
}/*834px以下ここまで*/

@leafytree 

リフィトリー様

ご丁寧にありがとうございます！
こちら設定したところ、モバイルで非表示設定にしていた部分に背景画像が表示される件が解決できました！

ただ、何度も何度も申し訳ないのですが、
ipad proでの表示にした場合、トップページ以外の背景画像とグローバルナビメニューの間に余白がある状態になってしまいました><
(ipadやモバイルの際は特に問題ありません。）

こちらの余白も無くそうとすると、難しい設定になりますでしょうか？

何度もお聞きしてしまいすみません！
もし、何か対策をご存じでしたらご教示いただけますと幸いです。

やなぎさん

以下のコードを追加して・・

/*トップページ以外のヘッダーの高さを調整*/
.header .header-in {
    min-height: 0;
    height: 10vw;
}

@media screen and (max-width: 834px) {
    .header .header-in {
        height: auto;
    }
}/*834px以下ここまで*/

以下のようにすると、イケるかもしれません。

/*トップページ以外のヘッダーの高さを調整*/
.header .header-in {
    min-height: 0;
    height: 10vw;
}

@media screen and (max-width: 834px) {
    .header .header-in {
        height: auto;
    }
}/*834px以下ここまで*/

/*トップページ*/
.home .header {
    background-image: url('https://moena-y.com/wp-content/uploads/2021/09/8818d4830dac5e2ade9f9587fc9ba1a4.jpg');/*もしくはテーマ設定で設定したもの*/
}

.home .header-in {
    height: 50vw;
}

@media screen and (max-width: 834px) {
    .home .header {
        background-image: url('https://moena-y.com/wp-content/uploads/2021/09/8818d4830dac5e2ade9f9587fc9ba1a4-1-e1631882193154.jpg');/*もしくはテーマ設定で設定したもの*/
    }

    .home .header-in {
        height: 44vw;
    }
}/*834px以下ここまで*/

@leafytree 

リフィトリー様

ご教示いただきましたコードで無事に設定できました！

何度も何度もご質問してしまったにも関わらず、
毎回丁寧にご対応いただき、ありがとうございます！！！

おかげで理想の表示にすることが出来ました。
本当にありがとうございました！