グローバルメニューのテキスト位置

初歩的なことかもしれませんが色々調べましたがわかりませんでした。教えてください。
現在サイトTOPを固定ページにしています。
サイトTOPの固定ページには目次は付かないのでしょうか。

<h2>や<h3>などを7個ほど使っており目次になる要素はあります。
もしよろしければご教授お願い致します。

わいひろ様(#43357)
返信が遅くなってしまいすみません。
今日明日は、このぐらいの時間にしか返信できないと思います。
URLですが下記のものです。よろしくお願いします。
http://www.simamu.pw/

わいひろ様　#43402
http://chetfaker.com/
ここのサイトと近いものを作ろうと思っているので、グローバルメニューは上記のサイトと同じ風にできたらと考えています。

サブメニューがない場合は、

サンプル: メニューulのliの縦中央寄せ | codepen

こんな感じに簡単にできますが、サブメニューが出るタイプにすると格段に難しくなります。
サンプルはscssで書いてあるので、css欄の下向き三角からview compiled cssでcssに直したものを子テーマstyle.cssに貼り付け、js欄を丸ごと子テーマjavascript.jsにコピペするとリストの間の「/」が入ります。

jQueryでセパレーターを入れずとも、ナビの出力時にセパレータを入れるような設定があったようにも思うのでここらは別として、ひとまずcssでは縦中央にするために色々と方法があります。

今回はflexを使用した例ですが、line-heightでも可能かと思います。flexの方が勝手に改行したり、今回はjustify-contentにてflex-startで、いわゆる通常の横並びを実現していますが、ここをspace-between等に変更することで均等横並びなどもできるようになります。その際はセパレーターがややこしいことになるのであまりオススメしませんが、できなくもないと思います。

#navi ulにfont-size: 24pxを入れていますが、ここを変更することでどんなフォントサイズでも縦中央寄せになります。またメニューの高さは#navi ulのheightです。
align-itemsでcenterにしているので、liに対してheightはいりません。align-itemsはulの縦中央にliを持っていきます。

くれぐれもサプメニューがない場合のやり方です。

Hidekichi様　#43421
詳しい説明等ありがとうございます。
Hidekichi様が記載していただいた通りコピペしてみたのですが、中央寄せはうまくいって文句なしです。
ですが、リストの間の「/」が入らないのですが、何故でしょう。
以下がjs内の物です。
他に何か見たい部分などあれば教えてください。

//ここに追加したいJavaScript、jQueryを記入してください。
//このJavaScriptファイルは、親テーマのJavaScriptファイルのあとに呼び出されます。
//JavaScriptやjQueryで親テーマのjavascript.jsに加えて関数を記入したい時に使用します。
(function($){
	$(function(){
		
		var liLength = $("#navi").find("li").length;
		
		$("#navi").find("li").each(function(i){
			if (i < liLength - 1) {
				$(this).after("/");
			}
		});
		
	});
})(jQuery);

> リストの間の「/」が入らないのですが、何故でしょう。

今の状態でですか？
サイトを見ると、メニューアイテムが1つしかないので入らないのではないですかね？

liLength はliの数です。これがメニューアイテムの数です。
if (i < liLength - 1) { でアイテムの数だけ繰り返す中(each部分)で、liLength – 1がアイテムの数より大きい時にアイテムの後にセパレータを入れてます。

アイテムが1つしかない場合は、i < 1 – 1となり、i < 0でiは0ですから、0<0となり、この判定は偽(false)となって、セパレーターを入れる処理が入りません。もし2つあった場合は、

※i(index)は0から始まります。つまりli[0]、li[1]…と言う感じです。
1つ目のアイテム i < 2 – 1 は i < 1、 0 < 1 → true
2つ目のアイテム i < 2 – 1 は i < 1、 1 < 1 → false

ここから、1つ目のアイテムの後にはセパレーターが入りますが、2つ目のアイテムは1<1と言う条件になりfalseとなりますので、入りません。
3つある場合はどうなるか、

1つ目のアイテム i < 3 – 1 は i < 2、 0 < 2 → true
2つ目のアイテム i < 3 – 1 は i < 2、 1 < 2 → true
3つ目のアイテム i < 3 – 1 は i < 2、 2 < 2 → false

と言う具合に、最後のアイテムは必ずfalseが返ってくるのでセパレーターが入りません。

Hidekichi様
完全にこちらのミスでした。すみません。
追加したところ無事に確認することができました。
もう一つ質問があるのを忘れていたのですが、
メニューをクリックした際に、スクロールでその記事まで飛ぶ方法を聞くの忘れていたのですが、
この件については新しいトピックを立てたほうがよろしいでしょうか？

Hidekichi様
完全にこちらのミスでした。すみません。
追加したところ無事に確認することができました。
もう一つ質問があるのを忘れていたのですが、
メニューをクリックした際に、スクロールでその記事まで飛ぶ方法を聞くの忘れていたのですが、
この件については新しいトピックを立てたほうがよろしいでしょうか？

新しくトピックを立ててもらう方が良いですが、その前に、「メニューをクリックした際に、スクロールでその記事まで飛ぶ方法」これはどういうものを前提とされているのかわかりませんが、グローバルメニューの場合は、そのページに遷移してしまいます。

スクロールでその記事まで移動させる場合は、その記事が同一ページにある必要があります。
同一ページに記事がある場合は、グローバルメニューでもスクロールでその記事の位置まで移動させることができます。

ただ、これらは通常グローバルメニューでやらずに、TOC(目次メニュー)でやるのが普通です。
別にTOCである必要もないのですが、TOCと言うのは通常見出しをページ内から取得して、それぞれにリンクを貼ります。そのリンクが見出しとリンクしているので、スクロールしやすいわけです。

必要なこととしては、スクロールのターゲットとなる見出しなり、位置をつけておくということが必要になります。

例えば、何かしらの商品紹介があるとして

<div class="itemTitle" data-name="item1">商品名</div>

こういう感じにdata属性でitemとその連番をつけておきます。これだけでターゲットとなります。idをつけても良いです。classで指定しても良いです。これらをどうするかでスクリプトの作り方が若干異なります。
見出しでやる場合は、wordpressにTOCのプラグインがあるので、それらを利用するのが手っ取り早いです。

これらは、記事をどのような構成にするかでやり方が異なったり、どうすれば最適なのかが変わりますので、ひとまずはスクロールは後回しにして、先に記事自体をまず作成して、それに合わせたやり方を探すのが賢明です。