WP　twentyseventeen 上部にfixするナビゲーションの上部にロゴや、別のカスタムメニューを出したい

標準のtwentyseventeenのテンプレートの場合、
ヘッダー部は

ロゴ
グローバルナビゲーション

の順に表示されますが、下部へスクロールするとロゴがきえてしまい、
グローバルナビゲーションのみ上部に残る仕様になっています。

これを、ロゴ部分からグローバルナビゲーションまで上部にfixedで表示したいです。

/wp-content/themes/twentyseventeen-child/template-parts/navigation/navigation-top.php

<?php
/**
 * Displays top navigation
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.2
 */

?>
<!--	<?php the_custom_logo(); ?> -->

<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Top Menu', 'twentyseventeen' ); ?>">
	<button class="menu-toggle" aria-controls="top-menu" aria-expanded="false">
		<?php
		echo twentyseventeen_get_svg( array( 'icon' => 'bars' ) );
		echo twentyseventeen_get_svg( array( 'icon' => 'close' ) );
		_e( 'Menu', 'twentyseventeen' );
		?>
	</button>

a

	<?php wp_nav_menu( array(
		'theme_location' => 'top',
		'menu_id'        => 'top-menu',
	) ); ?>

	<?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && has_custom_header() ) : ?>
		<a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a>
	<?php endif; ?>
</nav><!-- #site-navigation -->

ソース上にaとだけ記述した場合は、スクロール成功するのですが

あの部分を<?php the_custom_logo(); ?>にすると、
fixed自体が機能せず、すべてがスクロールしてしまいます。

正常に機能するときは、

失敗しているときは

とclassの付与に失敗しているところまでは分かったのですが、どこで処理しているのかが見つけられません。

行動規範の内容に同意します

回答1件

ベストアンサー

このfixed付与の停止は意図的な仕様です。
assets/js/global.jsの63行め〜に

// Make sure the nav isn't taller than two rows.
if ( navIsNotTooTall ) {
  /* 略 */
  // If the scroll is more than the custom header, set the fixed class.
  if ( $( window ).scrollTop() >= headerOffset ) {
    $navigation.addClass( navigationFixedClass );
  } else {
    $navigation.removeClass( navigationFixedClass );
  }
}

とあって、メニューが1行より長くなった場合、画面が狭くならないように固定を中止しているようです。

このコードを排除するというのも一つの手ですが、平和的（？）な解決策を一つ。

template-parts/navigation/navigation-top.phpのwp_nav_menuを次のように書き換え、

PHP
1<?php wp_nav_menu( array(
2  'theme_location' => 'top',
3  'items_wrap'     => '<ul id="%1$s" class="%2$s"><li>' . get_custom_logo() . '</li>%3$s</ul>',
4  'menu_id'        => 'top-menu',
5) ); ?>

子テーマのCSSに

CSS
1#site-navigation .custom-logo-link {
2  padding: 0px .25em;
3}
4#site-navigation .custom-logo {
5  vertical-align: middle;
6  width: 3em;
7  height: 3em;
8}