【WordPress】グローバルナビの各メニューを２行にする方法

2021年4月29日ワードプレス

ワードプレスの使用するテーマによっては
メニュー名を２行にすることができるものもありますが
そういった機能がない場合は、以下のような形で
２行にすることができます。

①
外観＞メニューにて、名前に以下のようなパターンで入力します。

新着記事<span class="menu-break">News</span>

②
外観＞カスタマイズ＞追加CSSにて以下コードを追加して保存。
見た目が悪い場合は数値等調整するとよいです。

span.menu-break {
	display: block;
	bottom: 10px;
	position: absolute;
	font-size:14px;
	color:red;
}

そうするとこのような感じになります。

写真は、フォントも調整しているバージョンです。