EASELのスマホ、タブレットでの閲覧時のメニューボタンの当たり判定を大きくするカスタマイズの備忘録です。
上の画像の青い範囲がデフォルトの当たり判定です。青い範囲以外のヘッダー部分をタップするとトップページに飛んでしまいます。
カスタマイズ後の当たり判定です。上下左右にあった余白がなくなって、メニューのアイコンから少し離れたところをタップしてもトップに飛ばないようになりました。
CSSの編集
以下のCSSをWordpressメニュー「外観」→「カスタマイズ」→「追加CSS」にコピペします。
@media (max-width: 767px){
header label#formenubar {
width: 90px;
height: 70px;/*当たり判定を広げる*/
top: 0px;
right: 0px;/*上と右に沿わせる*/
line-height: calc( 70px - 0px );/*メニューアイコンの位置調整*/
}
}幅と高さはデフォルトのヘッダーのサイズを基準に設定しています。もしヘッダーを編集している場合は数値を変えて使用してください。
終了です！お疲れ様でした。