Simplicity2のメニューバーの高さをこのページを参考に変えたのですが、モバイルのページで問題が起きました。

モバイルの場合ハンバーガーボタンを押すとメニューが展開しますが、それが記事に被ってしまうのです。

この場合、style.cssを変更したのですが、その変更がメニューを折りたたむ時も読み込まれることで、レイアウトが崩れたようです。

いろいろ試しましたが、最終的に以下の手順で対応しました。

1. 外観→カスタマイズで完全レスポンシブを有効化
2. 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にしています。

メニューの切り替え条件と一緒に書けるとベストなのですが、しばらくはこの設定で行くしかなさそうですね・・・