フォーラム冒頭の案内にありますとおり、お差し支えがなければ、対象ページのURLを提示し、高速化設定を無効にして、環境情報を貼り付けてください。

お手数おかけし申し訳ございません。

こちらのURLです。
宜しくお願い致します。
https://airlineman.com/

@おすし さん

お差し支えなければ、一応、環境情報も、貼り付けていだだけますか？

@おすし さん

Cocoonのヘッダー画像の設定は、ちょっと難しいところがあるみたいです。

私もテスト環境で１度だけ試しただけなので、上手くいくかどうかですが・・

Cocoon設定の「ヘッダー」タブの設定で、「高さ」に数値を入れていたら、その数値を消し、「ヘッダー背景画像」に設定した画像をクリアボタンでクリアします。

次に「ヘッダーロゴ」の方に、ヘッダー画像を設定します。

次に、以下のCSSを、子テーマに設定します。

.header-in {
width: 100%;
}

.logo-image{
padding: 0;
}

.logo-image span, .logo-image a {
width: 100%;
}

.header-in img {
width: 100%;
}

設定したら、サイトの表示を確認します。

表示におかしなところがある場合は、再調整が必要になるかもしれませんが、とりあえず、ここまで、やってみないと、他のカスタマイズされたCSSの影響等がわからないので、やってみるしかないのかなと思います。

イメージとしては、過去トピックでお問い合わせいただいた、まゆたろうの部屋 さんのような感じです。

お返事ありがとうございます。
環境情報は以下となります。

画像クリアとCSSの件を試みたのですが、ヘッダーが緑色のみになるというよくわからない状態になってしまいました。
お手数をおかけしますが宜しくお願い致します。
----------------------------------------------
サイト名：おすし修行ログ
サイトURL： https://airlineman.com
ホームURL： https://airlineman.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：5.4.1
PHPバージョン：7.3.17
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：en-US,en;q=0.9
----------------------------------------------
テーマ名：Cocoon
バージョン：2.1.4.1
カテゴリ数：4
タグ数：17
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.1
style.cssサイズ：12559バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
Contact Form 7 5.1.7
Jetpack by WordPress.com 8.4.2
WP Mail SMTP 1.9.0
----------------------------------------------

「高さ」の部分の数値を消したところ、何も表示されずにグローバルメニューが一番上にくる仕様になってしました汗

@おすし さん

そのようですね。

ちょっと、調べてみますね。

ありがとうございます。
宜しくお願い致します。

サイトタイトルを非表示にする設定になっているようです。

どこで、設定するんだっけ・・

ちょっと確認。

ヘッダーの画像がかなり横長で、ヘッダーの高さをそのままの400に指定しているからじゃないですかね。

高さを250～300ぐらいにするといい感じになってきますよ。

※おすしさんのヘッダー画像を使って、実際に自分のサイトで試してみました

  header_height.jpg

@おすし さん

子テーマのCSSの394行目

/************************************
** サイトタイトル非表示
************************************/

.logo-header{
display: none;
}

これをコメントアウトしてください。

/*
.logo-header{
display: none;
}
*/

こんな感じに・・

高さは、とりあえず、設定しないでください。

高さを設定すると、たぶんレスポンシブにならないと思われます。

@おすし さん

いい感じになってきました。

下の緑のスキマを無くすように調整しましょう。

少しお待ちください。

早速394行目をコメントアウトしました。
状況はよくなり、画像は出てきました！

ただまだ少しだけ謎の緑部分があります。汗

色々注文して申し訳ございません。

ヒロアキさんもコメントいただきありがとうございます！

ちょっと、手こずっていますが・・・

スキマ無くしましょう！

ありがとうございます！

以下のCSSでPC表示のときは、隙間が消えますね。

.logo-image a {
display: block;
}
.site-name-text {
font-size: 0;
}

font-size: 0;がHTML的にどうかは、別にして・・

でも、サイト名のテキストは無いんですよね。

ありがとうございます。

試してみたところ、隙間が半分くらいにはなったのですが、まだ少しだけ残ってしまっている状況です泣

.logo-image span, .logo-image a {
display: block;
}
.site-name-text {
font-size: 0;
}

こっちだと、どうでしょう？

あ、ちょっと待ってください。

間違っていました。

以下に修正します。

.logo-image span {
display: block;
}
.site-name-text {
font-size: 0;
}

たぶん、これでイケるかと・・

ありがとうございます。

試してみたのですが、変わらずでした、、、

色々提案していただいているのに申し訳ないです。

あとは、モバイル表示ですが、モバイル表示では、モバイルヘッダーボタンにロゴ画像があるので、非表示でいいような気もします。

@おすし さん

すみません。

もう一度、やってみます。

やはり、１つ前のヤツが正解みたいです。

.logo-image span, .logo-image a {
display: block;
}
.site-name-text {
font-size: 0;
}

なんどもすみません。

ありがとうございます！
無事に消えました！！

原因はなんだったでしょうか。
また同じことが起きないように気を付けたいと思います。

@おすし さん

Cocoonのヘッダー画像は、背景画像に設定すると、常に画像全体が見えるようになっている訳ではないんです。

このCocoonのサイトのように、背景画像と、ロゴ画像の２枚の画像を使うか、背景画像と、サイト名の文字を使うことを想定しているみたいなので、１枚の画像だけで、上手く配置するのは、なかなか難しいです。

それで、皆さん、けっこう苦労されていらっしゃるようです。

@y-hiroaki さん

今回は手こずってしまい、ご心配をおかけしました。

トピックに来てくださり、ありがとうございます。

@おすし さん

ヘッダーモバイルボタンのメニューボタンが機能していないみたいです。

このサイトに、案内がありますので、ご覧になってください。

ヘッダーモバイルボタンの設定方法

丁寧に説明ありがとうございます！
重ねてですが、対応していただき誠にありがとうございました。
本当に助かりました！

font-size: 0;とは、書いてみたものの、なんか違和感が残るなぁ・・

.site-name-text {
font-size: 0;
}

なんか、気持ち悪い・・・

.site-name-text {
line-height: 0;
}

まだ、こっちの方がいいか・・

了解です！
変えてみます。

大変申し訳ないのですが、
テーマを最新のものにアップデートしたところ、また同じ不具合が起きてしまいました。

もし対処法分かる方がいましたらご回答いただけると幸いです。
宜しくお願い致します。

@おすし さん

ありゃ、なんでやねん！

@おすし さん

こりゃ、アップデートのせいじゃないような・・

前にやった、ヘッダー部分は問題ないような気がします。

グローバルメニューに何か手を加えようとしていたのでは？

とりあえず、グローバルメニューのHTMLの記述で＜/i＞閉じタグの閉じ山括弧が足りないみたいです。

モバイルのときのグローバルメニューも少しおかしいような・・・

@leafytreeさん

ありがとうございます！

ご指摘の通り、グローバルメニューが問題で、不具合治りました！
誠にありがとうございます。
ご迷惑をおかけし申し訳ございません。