グローバルメニューのカスタムが思うようにいかず…

まず、Simplicityのメニューは色々とそれ用に手が加えられているので、カスタマイズするのは結構ハードルが高い部類です。そもそものwordpressが出力しているhtmlを加工するほうがずっとやりやすいのですが、その場合、タブレットの時にどうするか、スマホではどうするかが絶対的な問題になります。

PCだけだったらまぁ何とかイケても、それ以外の端末の時にどうするかってのはとても難しく感じられることになるだろうと思いますが、できないわけではありません。

そこでまず、以下のサンプルから#navi-inの中の.menuを複製して、メニューを新たに作る所から始めてみて下さい。
サンプル: メニューを複製する | codepen

これなら普通のulとliの構造なので比較的わかりやすいのではないかと。

[.newMenu]
  [ul]
    [li][/li]
  [/ul]
[/.newMenu]

こんな構造になっています。なので、

.newMenu ul {
  display: flex;
  flex-flow: row wrap;
}

などとしてスタイルできると思います。

jQueryで複製しています。なので子テーマjavascript.jsにスクリプトをコピペして試す必要がありますが、その際、最初のメニューはdisplay:noneでcssで消してあります。
これはscssで書いてあるのでview compiledボタンでcssに変換してから、子テーマstyle.cssに貼り付けます。

codepenのcss欄がもし無い場合、画面が狭ければタブレットサイズになっているので本来非表示なのですが、敢えてこれを入れることで表示自体をなくしています。
jQueryでデフォルトのメニューを消してしまうこともできますが、何かあった時にすぐに元に戻せるような対応です。
最悪にっちもさっちも行かない場合は、jQueryの内容自体を全て削除してcss(display:none)を元に戻せば、デフォルトのメニューが表示されます。

Hidekichiさん

大変丁寧でわかりやすい解説ありがとうございます！
まだちょっとハードルが高いという事はよくわかりました。身のある返事がまるで出来ないほど理解できないので、アドバイスを参考にじっくり腰を据えて挑んでみたいと思います。
ありがとうございます！

わいひらさん

返事遅れてすみません、返信ありがとうございます。
色々いじってみてハードルが高かったため、もう少し初歩的な所から始めてみる事にしました。

リンク参考にさせていただきます。ありがとうございます！