メニューバーのずれについて

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; /* 円の色 */
	}
}

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