Cocoonのヘッダーモバイルメニューの位置がおかしいのを修正する方法をご紹介します。
まずはじめに「ヘッダーモバイルボタン」ではなく「ヘッダーモバイルメニュー」であることに注意してください。
Cocoonのヘッダーモバイルメニューの位置がおかしい
以下はヘッダーモバイルメニューの位置がおかしい画像です。
この現象はどういうときにおきるのかというと「ヘッダーモバイルボタン」を使っているときです。
ヘッダーモバイルボタンとかヘッダーモバイルメニューとかわかりにくいと思いますが、まずこれを理解してないと話は進まないですが、おそらくこのページで来ている人は理解してるでしょうからとりあえずこのまま話を進めます。
ヘッダーモバイルメニューの位置を修正する
ヘッダーモバイルメニューがヘッダーモバイルボタンと重なっているので修正しますがその前にCocoonのヘッダーモバイルボタンがどのような構造になっているか理解しておく必要があります。
Cocoonのヘッダーモバイルボタンはcssのfixedで常に画面の一番上に表示されるようになっています。そしてこのヘッダーモバイルボタンの高さ分の余白はどこで設定されているのかというとbodyで確保されています。正確にいうとbodyタグにクラス名がついていてそれにmarginが設定されています。
以下にcssコードをしめします。（若干違いがある可能性もあります）
@media screen and (max-width: 1023px){
body:where(.mblt-header-mobile-buttons,.mblt-header-and-footer-mobile-buttons) {
margin-top: 46px;
}
}これをmargin-top: 53px;に修正します。子テーマのスタイルシートにかいてください
@media screen and (max-width: 1023px){
body:where(.mblt-header-mobile-buttons,.mblt-header-and-footer-mobile-buttons) {
margin-top: 53px;
}
}まとめ
Cocoonでヘッダーモバイルボタンとヘッダーモバイルメニューを使用している場合ヘッダーモバイルメニューが重なってしまうため。bodyに設定されているmargin-topの値を修正します。
正直にいうとデフォルトでこの問題が発生するのはテーマ作者の配慮がいきとどいてないんだろうなとは思いますが複雑にテーマが実装されているのでミスがあっても仕方ないのかなと思います。
ちなみにCocoonでこの問題に遭遇する確率はかなり低いかもしれません。なぜならそもそもヘッダーモバイルボタンとヘッダーモバイルメニューを両方使用するケースは自分でメニューの設定をしなければならないためそこまでこだわりを示す人はおそらく少ないと思われるからです。
コメント