画像ポップアップのcssとjsを停止するとヘッダー画像とメニューの間が狭

[nashikuzushi]

表題の件ですが下記トピックの続きとなります。
https://ja.forums.wordpress.org/topic/158151?replies=19

使用テーマ「Fluxipress」
https://ja.wordpress.org/themes/fluxipress/

・トップページと同じテンプレートを適応している固定ページ以外の「固定ページ」
・全記事ページ
が表題の様に狭くなってしまいます。

何故か画像ポップアップのcssとjsを停止すると
ヘッダー画像とメニューの間が狭くなります。

>>nobitaさま

ご回答ありがとうございます。
ヘッダー画像は自分で指定しました。

header.phpに直接imgタグで指定しております。
画像を横並びにして、ホバーで画像が変わるようにしております。
下記がソースとなります。

<div id="header">
		<div class="wrap">
			<div class="inner">
				<?php if(is_home()) : ?><h1 id="blog-title"><?php else : ?><strong id="blog-title"><?php endif; ?>
					<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name')); ?>"><img src=".../images/head_1.jpg" onmouseover="this.src='.../images/head_1h.gif'" onmouseout="this.src='.../images/head_1.jpg'" /><img src=".../images/hagu.gif" onmouseover="this.src='.../images/hagu_r.gif'" onmouseout="this.src='.../images/hagu.gif'" /><img src=".../images/head_2_2.jpg"  style="margin-right:50px;" /><img src=".../images/head_3.jpg"></a>
				<?php if(is_home()) : ?></h1><?php else : ?></strong><?php endif; ?>
				<div id="menu">
				<?php
					wp_nav_menu(array(
						'theme_location' => 'primary',
						'container' => false
					));
				?>
				</div>
			</div>
		</div>
	</div>

下記画像の「正解」に全てのページもしたいです。
固定ページと記事ページは「不正解」の方になってしまっております。
http://www.fastpic.jp/images.php?file=8562508992.jpg

以上となります。

大変お手数ですがご確認をよろしくお願い致します。

[nobita]

マージン等は、CSSがメインになるので、htmlソースだけでは、何とも答えられないのですが、

こちらでも、一通りのテストはしてみたのですが、レスポンシブの部分で問題が発生します。

画像の高さに問題が出るようです。　テーマのjsの影響かなといったところですが

マージンだけの問題で収まっているなら、良い方なのかもしれないですね。

それぞれのページで、マージンの調整を行っていただくしかないかも、、、

[nashikuzushi]

>>nobitaさん

ご回答ありがとうございます。
テストの方もしていただき感謝です。

>>レスポンシブの部分で問題が発生します。

こちらですが、私の環境ではレスポンシブにしても
問題は見受けられなかったのですが、
どのような問題がございましたでしょうか？

>>それぞれのページで、マージンの調整を行っていただくしかないかも、、、

それが一番早そうですね…
ありがとうございます。

大変お手数なのですが、よろしくお願い致します。

[nobita]

>>レスポンシブの部分で問題が発生します。

こちらですが、私の環境ではレスポンシブにしても
問題は見受けられなかったのですが、
どのような問題がございましたでしょうか？

テストの条件が悪かったみたいで、苦しくなって、「テーマのjsの影響かなといったところですが」　テーマのせいにしてしまったようです。

ごめんなさい。

一応テストの条件書いておきますね。

functions.php

function extend_custom_header_setup() {
	$args = array(
		// Text color and image (empty to use none).
		'default-text-color'     => '515151',
		'default-image'          => '',

		// Set height and width, with a maximum value for the width.
		'height'                 => 250, //px
		'width'                  => 1120, //px

		// Support flexible height and width.
		'flex-height'            => true,
		'flex-width'             => true,

		// Random image rotation off by default.
		'random-default'         => false,

		// Callbacks for styling the header
		'wp-head-callback'       => 'extend_header_style',

	);

	add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'extend_custom_header_setup' );

function extend_header_style() {

	$property = get_custom_header();
	?>
	<style type="text/css">

		.header-image-wrapper{
			width:1120px;
			margin:32px auto;

		}
		.lt-1280 .header-image-wrapper{
			width:90%;
		}
		.lt-640 .header-image-wrapper img{
			width:100%;
		}
		.header-image-wrapper img{
			width:32.3%;
			height:auto;
			max-width:100%;
			margin:.5%;
		}
		.header-image-wrapper a{
			/* 改行スペース相殺 */
			margin-left:-4px;
		}

	</style>
	<?php
}

OK

<?php
if ( has_header_image() ) {?>
	<div class="header-image-wrapper">
	 	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" >
			<img src="<?php header_image(); ?>" class="header-image"  alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
		</a>
	 	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" >
			<img src="<?php header_image(); ?>" class="header-image"  alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
		</a>
	 	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" >
			<img src="<?php header_image(); ?>" class="header-image"  alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
		</a>
	</div>
<?php } ?>

	<div id="main" class="wrap clear">

テスト条件1200×400のヘッダー画像、640pxで横並び解除