グローバルメニューの幅を調整する
2018年6月16日
カスタマイズ
カスタマイズ

グローバルメニューの幅を調整する方法を紹介します。
Healerのグローバルメニューの幅は固定となっており、
長い文字にしてしまうと段落落ちが発生します。
それを回避するためには、
CSSで幅の調整していただく必要があります。
グローバルメニューの幅を調整する方法
テーマカスタマイザーでCSSを追加する
WordPress管理画面から
以下の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%; } }