【WordPress】グローバルナビの複数行表示

Question

###前提・実現したいこと
WordPressでHPを作成しています。グローバルナビの各メニューのデザインを複数行かつテキストをセンタリングさせたいです。

メニューをカスタマイズするためにMax Mega Menuプラグインを導入しています。

###発生している問題・エラーメッセージ

テキストが折り返し表示されない。

###該当のソースコード
Max Mega Menuのカスタムcss

#{$wrap} #{$menu} > li.mega-menu-item {
  width: 100px;
}

↑これでメニュー各項目の幅が統一(100px)になっています。

#{$wrap} #{$menu} > div.mega-menu-wrap-primary {
  word-wrap: break-all;
}

###試したこと
上記のcssカスタマイズ

###補足情報(言語/FW/ツール等のバージョンなど)
WordPress 4.5.4

11/17 11:23追記
情報不足失礼いたしました。テーマはUntitledです。
https://ja.wordpress.org/themes/untitled/

Comments

[kei344]

使用されているテーマは自作テーマでしょうか？それとも公開されているテーマでしょうか？後者の場合は入手先をリンクつきで質問文に追記してください。

[JunYoshida]

失礼しました。追記いたしました。

Answer 1

もともと複数行を考慮されていないメニューなので、幅を指定すること自体お勧めしません。また、PC環境以外にどのような影響が出るかの確認はしておりません。

「上下もセンタリング」とかされる場合は影響範囲がかなり広いため、私では回答できないと思ってください。

#{$wrap} #{$menu} > li.mega-menu-item {
	word-wrap: break-word;
	overflow-wrap: break-word;
	width: 100px;
}
#{$wrap} #{$menu} > li.mega-menu-item > .mega-menu-link {
	line-height: 1;
	text-align: center;
}

【overflow-wrap、word-wrapプロパティの意味と使い方 | CSS | できるネット】
https://dekiru.net/article/13131/

Comments

[JunYoshida]

ありがとうございます。複数行表示自体はできました。
改行位置を自由に調整することは難しいのでしょうか。例えば、1行目は右端ギリギリまで表示し、2行目は1文字、など。
もしくはそういった場合は文字ではなく、画像を使うものなのでしょうか？

[kei344]

とりあえずこのメニューでは無理だと思います。

Answer 2

テキストの代わりにimgタグを使って画像を指定することで解決いたしました。