ヘッダーにナビゲーション機能を付けたくて行ってみた設定のやり方です。
参考にした記事から追記したところもある記事になります。
jQuery をフッターに記述する
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function($) {
$(".menu-toggle").on("click", function() {
$(".main-navigation").toggleClass("toggled");
});
})(jQuery);
</script>
スマートフォン・タブレット閲覧時のメニュー展開ボタンを動作させるために必要なコードになります。フッター上のカスタマイズエリアに貼り付けて下さい。jQuery 本体は既に読み込んでいる場合は不要です。
<nav class="main-navigation">
<div class="menu-toggle">メニュー</div>
<div class="main-navigation-inner">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">プロフィール</a></li>
<li><a href="#">アーカイブ</a></li>
<li>
<a href="#" class="has-child">カテゴリー</a>
<ul>
<li><a href="#">子カテゴリ1</a></li>
<li><a href="#">子カテゴリ2</a></li>
</ul>
</li>
<li><a href="#">リンク</a></li>
</ul>
</div>
</nav>
次に、上記の HTML をヘッダー下のカスタマイズエリアに貼り付けます。メニューのリンクとなる <a> 直下に <ul> タグを記述すると、最大で4階層（曾孫）までのサブメニューが表示できます。
<a> に .has-child を指定すると、1階層目では下向きの矢印が、2階層目以降では右向きの矢印が表示されます。指定しなくてもサブメニューは表示されますが、指定したほうが「このメニューにはサブメニューがある」と理解しやすいでしょう。
"#"の部分は飛び先のアドレスに変更してください。
私はそのままコピペしただけだったので、クリックしても無反応のままで、
なぜかわからず困ったので注意してください。
カスタマイズ
.main-navigation,
.main-navigation ul ul {
background-color: #66cdaa;
}
.main-navigation と .main-navigation ul ul に背景色を指定するとナビゲーションバーの色が変わります。
中央寄せにする
@media screen and (min-width: 1024px) {
.main-navigation {
text-align: center;
}
}
.main-navigation に text-align: center を指定すると、ナビゲーションバーがセンタリングされます。
参考にした記事はこちらです。
ありがとうございます。