グローバルメニューの幅を調整する

グローバルメニューの幅を調整する方法を紹介します。

Healerのグローバルメニューの幅は固定となっており、
長い文字にしてしまうと段落落ちが発生します。

それを回避するためには、
CSSで幅の調整していただく必要があります。

グローバルメニューの幅を調整する方法

テーマカスタマイザーでCSSを追加する

WordPress管理画面から外観 > カスタマイズ > 追加CSSと進み、
以下のCSSを追加してください。

数字の部分を変更していただくことで、
グローバルメニューの幅を調整することができます。

PC、スマホ、タブレットで反映するCSSが違います。
デバイスごとに確認しながら調整してください。

/*media Queries スマホサイズ
----------------------------------------------------*/
@media only screen and (max-width: 767px) {
	#mainmenu ul {
		max-width: 1100px;
		min-width: 600px;
	}
}

/*media Queries PCサイズ
----------------------------------------------------*/
@media screen and (min-width: 768px) {
	#mainmenu ul li {
		width: 20%;
	}
}

/*media Queries iPad縦向き
----------------------------------------------------*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
	#mainmenu ul {
		max-width: 960px;
	}
	#mainmenu ul li {
		width: 20%;
	}
}

/*media Queries iPad横向き
----------------------------------------------------*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {
	#mainmenu ul {
		max-width: 960px;
	}
	#mainmenu ul li {
		width: 20%;
	}
}