「Twenty Seventeen」では、パソコン画面の場合は、下にスクロールしても「メニューバー」は上部に固定され、常に見える状態ですが、スマホのハンバーガーメニュー（三メニュー）は、スクロールすると無くなってしまう。
これを上部に常に固定するためのカスタマイズです。
必ず子テーマで編集してください。（子テーマの作成方法はこちら）
スタイルシートと JavaScript を記述する
style.cssにスタイルを記述
外観＞カスタマイズ＞追加CSSに、以下のコードをコピペする。
@media screen and (max-width: 48em) {
.site-navigation-fixed.navigation-top {
bottom: auto;
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
z-index: 7;
}
.admin-bar .site-navigation-fixed.navigation-top {
top: 0;
}
.menu-main-container {
max-height: 90vh;
overflow: hidden auto;
}
}functions.phpに、JavaScriptを記述
外観＞カスタマイズ＞テーマエディターから「テーマ編集画面」右側の「テーマのための関数」を選択し、以下のコードをコピペする。
function my_enqueue_scripts() {
$script = <<<SCRIPT
(function($) {
var body = $('body'),
navigation = body.find('.navigation-top'),
customHeader = body.find('.custom-header'),
navigationOuterHeight = navigation.outerHeight(),
headerOffset = (body.hasClass('has-header-image')) ? customHeader.innerHeight() - navigationOuterHeight : 0;
$(window).on('scroll', function() {
if ($(window).scrollTop() >= headerOffset) {
navigation.addClass('site-navigation-fixed');
} else {
navigation.removeClass('site-navigation-fixed');
}
});
})(jQuery);
SCRIPT;
wp_add_inline_script( 'twentyseventeen-global', $script );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts', 11 );注意事項
メニューのプルダウン数が多い場合、メニュー下部がスクロールできず、表示されない。
いまのところメニュー数が少ないので問題はないが、今後は検討の余地あり。
以上です。
Other Contents
1-01 小テーマ の作成
1-02 基本構造とデフォルトのカスタマイズについて
1-03 ホームページ設定やテーマオプションが表示されない
2-01 フッター に自分のコピーライトを表記する
2-02 アドセンス審査コードの貼り付け
2-03 スマホ表示でハンバーガーメニューを上部固定
2-04 スマホ表示でハンバーガーメニューの文字を消す
2-05 フロントページのセクション数を変更
2-06 特定のブロックにだけ背景色をつける
2-07 「モデレートしてください」メールを止める
2-08 見出しのデザイン変更する
2-09 パンくずリストを設置
2-10 アイコンフォントを利用する
2-11 任意の画像にのみ枠線をつける