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

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

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

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

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

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

[WordPress管理画面] ⇒ [外観] ⇒ [カスタマイズ] ⇒ [追加CSS] と進み、
以下の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%;
	}
}