グローバルメニューのサブメニューで文字が重なってしまう

> サブメニューが24文字を超えると、
> 次のサブメニューと重なって表示されてしまい、見にくいのです。

単純にサブメニューの文字数を少なくすればよいかと思うんですけれども、グローバルメニューのカスタマイズはかなり難度が高いので、どうすればよいかを簡単には説明できません。

サブメニューの幅を最大で固定して(例えばmax-width: 200px;とか)、overflow: hiddenを入れればはみ出した部分は非表示になりますので、表示自体は問題ないのですが、サブメニューが読めないとまずいと言うことになると、それに合わせてカスタマイズするには別の方法でグローバルメニューを表示させるようにする方が良さそうです。

デフォルトのグローバルメニューは、相対値ではなく絶対値でサブメニューの位置が設定されています。
このため、何かしらが別の要素を押しのけて重ならないようにすると言うことはできません。
重ならないようにするためには、それ用のスタイルを適用するしか無いわけです。これはcssだけではなくjQueryも必要になるかと思います。
cssだけでもできなくはないかもしれませんが、完全に問題を解消させるのは難しいでしょう。

それならば、デフォルトのcssを適用せずに、新たに専用のスタイルを適用させたほうが良いのですが、#naviの中に入っている以上どうしてもデフォルトのcssが適用されてしまいます。またセレクタを変えることもできません。

グローバルメニューのhtml自体はただのリストなので、ulとliのリスト表示を、好きにスタイルすることはできると思いますが、元のcssを初期化するのがとても面倒です。またPC時とモバイル時の表示が変わったりすることもあって、その分のスタイルもしないといけません。

ここらを初心者と自称される方に対して「やってみなよ」と言うのはあまりにも酷な話です。まぁ挫折されると思います（笑）

で、まぁそういう方のために、より広くサブメニュー部分を使える方法として、以前作ったサンプルがあります。

サンプル: menu, vertical slide 主にWordpress theme Simplicity用 | codepen

またグローバルメニューをクローンして1からスタイルする人のために、

サンプル: グローバルメニューをクローン | codepen

こういうのもあります。これなら、メニューはただのリストになりますので、新たに作られた.newMenuに対してスタイルしていけば良いと言うことになります。例えば、

.newMenu ul {
  padding-left: 0;
}

こんな感じでスタイルできます。

まず必要なこととしては、どうすれば改善されるかと言うよりも、どのように表示したいかがポイントです。
例えばどこかのデザイン事務所に、「このサブメニューが重なるんだけどもどうすればよいか？」と聞くよりも、「ここが重なるのでこういうふうに表示されるようにして欲しい」と依頼される方がさっくり話がすすむと思います。

改善する方法は色々とあると思います。1からデザイン自体を変更する、長いメニューを短く表示させるスクリプトを書く、cssで表示方法を変更する等、どれが最適なのかは僕らにはわかりませんから、そこをどうしたいかをまず考えてもらうと言うのが必要かと思います。
簡単なのはサブメニューの文字数を問題ない文字数になるまで減らすと言うことだろうと思います。

ダッシュボード→メニューでその長いサブメニューの右側にある下向き三角で中を開いて、ナビゲーションラベルを変更したら、表示する文字の内容を変更できますので、リンクはそのままラベルの内容だけ変更すると言うことができます。

＞hidekichiさま、

　早速の丁寧なお答え、ありがとうございます！

　読ませていただいたのですが、本当に初心者なので、理想とは異なりますが「サブメニューを短くする」案で行きたいと思います（汗）。

　そして、もう少しサイトを開発して、デザイナーさんに頼めるくらいのレベルになったら、プロの方に変えてもらおうと思います。

　このように質問できる場があって、やっぱりSimplicityにしてよかった！と思っています。ありがとうございました。