Simplicity2のメニューバーの高さをこのページを参考に変えたのですが、モバイルのページで問題が起きました。
モバイルの場合ハンバーガーボタンを押すとメニューが展開しますが、それが記事に被ってしまうのです。
この場合、style.cssを変更したのですが、その変更がメニューを折りたたむ時も読み込まれることで、レイアウトが崩れたようです。
いろいろ試しましたが、最終的に以下の手順で対応しました。
- 外観→カスタマイズで完全レスポンシブを有効化
- responsive.cssに以下を追記
@media screen and (min-width: 1130px) {
#navi ul {
height: 44px;
}
#navi ul > li {
height: 100%;
}
#navi ul li a {
height: 100%;
box-sizing: border-box;
font-size: 110%;
line-height: 32px;
}
}
ブラウザの画面サイズが1130px以上でCSSを適用させる設定を行いました。
実際に書いてみると割とうまいこといきますが、メニューが切り替わる条件が場合によって変わる気がします。
いちおう1100pxで変わるようですが、うまく行かない時もあったので1130pxにしています。
メニューの切り替え条件と一緒に書けるとベストなのですが、しばらくはこの設定で行くしかなさそうですね・・・