●ヘッダー画像表示

今のヘッダー画像1900×450pxを前提としています。
以下を置き換えて下さい。

@media screen and (max-width: 1900px) {
  .header {
    background-size: contain;
  }
}

↓

.header {
  height: 0;
  object-fit: cover;
  padding-top: calc(450 / 1900 * 100%);
  width: 100%;
}

●コーディングエラー

子テーマCSSの以下の行にコーディングエラーがあります。
修正して下さい。

97行目
/768px以下/
↓
/* 768px以下 */

104行目
/480px以下/
↓
/* 480px以下 */

●要件

• 右にハンバーガーメニュー
• 真中はロゴ画像
• 検索窓削除

以下を追加して下さい。（図参照）

/* メニューと検索を入れ替え */
.mobile-header-menu-buttons {
  flex-direction: row-reverse;
}

/* 検索を非表示 */
.mobile-header-menu-buttons .search-menu-button {
  display: none;
}

●ご参考
よく質問を読んだら、上記ではなく以下の事ですね。
参考にして下さい。

https://risulabo.com/cocoon-mobile-header-menu/

●コーディングエラー
漏れていたので修正するか、コメント削除して下さい。

114行目

/*ヘッダ画像のブログタイトル削除
↓
/* ヘッダ画像のブログタイトル削除 */

ご返信遅れてすいません。

ご丁寧に教えていただき誠にありがとうございます。無事解決しました！

モバイルヘッダーメニューをハンバーガーメニューにはできたのですが、ヘッダーロゴが一回り小さく表示されるのですが、余白が余らないようにするにはどうすればいいですか？

質問ばかりですいません。

●CSS定義の説明
以下の定義は、現在のヘッダーサイズ縦450px(赤字)、横1900px(青字)となっています。

.header {
  height: 0;
  object-fit: cover;
  padding-top: calc(450 / 1900 * 100%);
  width: 100%;
}

例えば、縦200px、横1500pxとするなら以下のように数字を変更して下さい。
padding-top: calc(200 / 1500 * 100%);

●補足
画面幅に応じ、ヘッダー画像の横幅を基準に、ヘッダー画像の縦幅を調整し、縦横比を保持します。
この為、ヘッダー画像の縦幅が大きい時、画面幅に応じヘッダー全体が大きくなります。

●ヘッダーメニューの設定
上記CSSでなく、本来、以下の設定をするのが望ましいです。

https://risulabo.com/cocoon-mobile-header-menu/

忘れかけていた昔の事を思い出し、良い復習になりました。
こちらこそ、ありがとうございます。

1. @chu-ya 

ありがとうございます。

モバイルヘッダーロゴの余白を無くしたいのですが何かいい方法はありますか？？

chu-ya さんが教えてくださったブログを参考にしてやったのです写真ようになり余白ができてしまいます‥

大変お手数ですが宜しくお願い致します。

@yujikoga さん

投稿者:: @yujikoga

モバイルヘッダーロゴの余白を無くしたいのですが何かいい方法はありますか？？

どの部分を示すのか、赤枠とかその部分が分かるよう、図示してもらえますか？

@yujikoga さん

前略、横から失礼いたします。

現在、「URUTRAAUTO」のモバイル用のロゴ画像は、「JPEG」形式で作成されていらっしゃるご様子ですが、JPEG形式は、「透明」をサポートしていません。

ロゴ画像を「透明」部分を作成可能な「PNG」形式で作成し、ロゴの背景色を透過させることにより、いわゆる「余白」にあたる部分が見えなくなるようにすればよいような気がします。

現在はロゴの背景部分は濃いグレーの色なので、ロゴ画像は文字を白色などの明るい色として、ロゴ画像の文字以外の部分は、透明にするという方法です。

ロゴの背景部分を白色などの明るい色に設定した場合は、ロゴ画像の文字を黒や濃いグレーなどの色にし、やはりロゴ画像の文字以外の部分は、透明にしておく、といった具合です。

@yujikoga さん

試しに、ちょっと雑なのですが、文字を白色にして、文字以外を透明にした画像を作ってみました。

それを貼り付けてみますね。（おそらく文字は、フォーラム上では読めないと思います）

@yujikoga さん

また、現在のロゴ画像で、画像を取り替えずに周りのグレーの部分を白くしたい、といった場合は、以下のCSSで、グレーの部分を白色にすると良いかもしれません。

.mobile-header-menu-buttons.mobile-menu-buttons > li:nth-of-type(3n+1) {
  background-color: #fff;
}

@yujikoga さん

以下のような有用なトピックをたててくださっている方もいらっしゃいます。いろいろと参考になるかと思います。

【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック

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

また、テーマ作者様のブログの以下の記事もちょっとChromeの仕様が古いですが参考になるかと思います。

WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

https://nelog.jp/how-to-use-developer-tools-for-wp-beginner

@yujikoga さん

左上隅の「menu」ボタンですが、アイコンが表示されていないようなので、以下のようにするとどうでしょうか。

透過画像ですが、私は専らPhotoshopを利用していますが、他の方法でも作れそうな気もします。

資料作成に便利な「透過PNG」とは？作り方・保存方法をまとめてご紹介

https://hyakuyattsu.com/create/png

yujikogaさん

余計な話かもしれず、本題からも逸れてしまいますが、気づいてしまいましたので、書かせていただきます。

サイトのSSL化はなさらない予定なのでしょうか。

投稿者:: @yujikoga

サイトURL： http://urutoraauto555.com
ホームURL： http://urutoraauto555.com

「http」から始まってしまっています。

ご自身で貼り付けていただいたスクリーンショットにも「安全ではありません」と表示されてしまっています。

Mixed Content: The page at 'https://urutoraauto555.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://urutoraauto555.com/wp-content/themes/cocoon-master/skins/monochrome/style.css?ver=6.0'. This request has been blocked; the content must be served over HTTPS.
 
混合コンテンツ：「https ://urutoraauto555.com/」のページはHTTPS経由で読み込まれましたが、安全でないスタイルシートを要求しました「http ://urutoraauto555.com/wp-content/themes/cocoon-master/skins/monochrome/style .css？ver =6.0'。 このリクエストはブロックされました。 コンテンツはHTTPS経由で提供する必要があります。