ヘッダー画像が正しく流れるようにするには、いくつか問題があります。これはレスポンシブ WP テーマです。
これが私が達成しようとしているデザインです。(ソーシャルアイコンについては今のところ心配していません): http://screencast.com/t/0xJuqKuteU
まず、次のようにロゴの下とバナーを超えて流れるように、背景が赤みを帯びたメッセージ バーが必要です: http://screencast.com/t/CZ4DkbRA50R
次に、バナーとメッセージ バーの両方について、画面が携帯電話のサイズに縮小されたときにうまく機能するようにする必要があります。これは、電話で見るために必要な方法です。http://screencast.com/t/z5BQ7zB4
ナビゲーションのすぐ下にバナーが表示され、メッセージ バーが消えることに注意してください。
ここに私が取り組んでいるサイトがあります: http://dev.frugalreality.com
ご協力いただきありがとうございます！！
画面の CSS とメディア/電話の CSS ページを用意すると、2 つの異なる画面の管理に役立ちます。
メッセージ バーをロゴの下に「浮かせる」ようにするには、含まれる div css (#header-callout) をposition:relative;設定し、z-index を負の値に設定する必要があります (z-index: -1する必要があります)。これにより、div にレイヤーが作成され、メッセージ バーが他のすべての div の下に配置されます (他の何かをより低い z-index に設定しない限り)。
iPhone の画面サイズで異なる表示を行うには、メディアクエリを使用することをお勧めします。これらの使い方がわからない場合は、この記事を参照して意味を理解することをお勧めします: http://css-tricks.com/css-media-queries/
メッセージ バーを表示しないようにするにdisplay:noneは、適切なメディア クエリの css に #header-callout を配置する必要があります。