サポート » テーマ » メニューバーのずれについて

  • TwentyFourteenテーマにおいて下記のようなカスタマイズを行いましたが、
    スクロール時にメニューバーがぴょんと上部に移動してずれてしまいます。
    挙動がおかしいだけで見ることは可能ですが、気持ちが悪いので修正したいです。

    また、すべて子テーマを作成した上でのカスタマイズとなります。

    header.php –twitterボタン用の画像を追加

    <div class="header-main">
    	<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    
    	<div class="search-toggle">
    		<a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
    	</div>
    
    	<!-- twitterアイコン追加 -->
    	<div class="sns-icon">
    		<a href="twitterのURL" target="_blank"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/twitter.png" /></a>
    	</div><!-- .sns-icon -->
    	<!-- 追加ここまで -->
    
    	<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
    		<button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
    		<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
    		<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    	</nav>
    </div>

    style.css –検索トグルと上記で追加したtwitter用のボタンを円形に変更

    /* twitter用アイコンの円背景 */
    .sns-icon {
    	float: right;
    	margin: 2px 5px 2px 3px;
    	width: 44px;
    	height: 44px;
    	-webkit-border-radius: 50%;
    	-moz-border-radius: 50%;
    	border-radius: 50%;
    	background-color: #69c096; /* 円の色 */
    }
    .sns-icon:hover {
    	width: 44px;
    	height: 44px;
    	-webkit-border-radius: 50%;
    	-moz-border-radius: 50%;
    	border-radius: 50%;
    	background-color: #97cfb4; /* 円の色 */
    }
    
    /* twitter用アイコンのサイズ・配置調整 */
    .sns-icon img {
    	width: 25px;
    	height: 20px;
    	margin: 13px 11px;
    }
    
    /* 画面サイズが782以下の場合非表示にする */
    @media screen and (max-width: 782px) {
    	.sns-icon {
    		display: none;
    	}
    }
    
    /* 検索トグルWEBフォント */
    .search-toggle:before {
    	color: #fff;
    	content: "\f400";
    	font: 24px Genericons;
    	margin-top: 10px;
    }
    
    /* 検索トグルの背景色を変更する PC用*/
    @media screen and (min-width: 783px) {
    	.search-toggle,
    	.search-toggle.active {
    		margin: 2px 4px 2px 3px;
    		width: 44px;
    		height: 44px;
    		-webkit-border-radius: 50%;
    		-moz-border-radius: 50%;
    		border-radius: 50%;
    		background-color: #69c096; /* 円の色 */
    	}
    
    	.search-toggle:hover {
    		width: 44px;
    		height: 44px;
    		-webkit-border-radius: 50%;
    		-moz-border-radius: 50%;
    		border-radius: 50%;
    		background-color: #97cfb4; /* 円の色 */
    	}
    }
    /* 画面サイズが782以下の場合左右のmarginをなくす */
    @media screen and (max-width: 782px) {
    	.search-toggle,
    	.search-toggle.active {
    			margin-top:1px;
    			width: 44px;
    			height: 44px;
    			-webkit-border-radius: 50%;
    			-moz-border-radius: 50%;
    			border-radius: 50%;
    			background-color: #69c096; /* 円の色 */
    	}
    }

    どうぞ宜しくお願い致します。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • スレッド開始 okoge

    (@okoge)

    追記で失礼致します。

    更新ボタンを押してみると何故か挙動が問題ない状態になったりします。
    もしかしてCSSの中身の問題というよりも、ページ自体の読み込みの問題なのでしょうか?

    モデレーター Daisuke Takahashi

    (@extendwings)

    キャッシュ系のプラグインを使っていないでしょうか。もし使っていれば停止させてみてください。

    スレッド開始 okoge

    (@okoge)

    Daisuke Takahashiさん

    お返事遅くなり申し訳ございません。
    キャッシュ系のプラグインですが、現在有効化しているプラグインの中にはありませんでした。
    最初から入っていたWP Super Cacheというプラグインがございましたが、こちらは一度も有効化しておりません。念のため削除してみましたが、特に動作は変わりませんでした。

    今回の問題の挙動について何度か再現させてみたところ、Chrome(36.0)とFirefox(31.0)で下記の現象が見られました。
    ・スーパーリロードを行った直後のみ挙動がおかしくなる
    ・一度通常の更新を行えば挙動は正常になる

    IE11においては問題の現象は再現できませんでした。
    スーパーリロードの時のみなので、キャッシュや読み込み関係の問題の可能性が高そうです。

    現在使用しているサーバがロリポップという会社なのですが、調べてみたところどうもWordPressの読み込みが遅いとの報告を多々見かけました。
    サーバ側が原因の可能性もありそうなので、引き続き調査をしてみます。
    ありがとうございました。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「メニューバーのずれについて」には新たに返信することはできません。