スマホで自サイトをチェックしていたらどうもモバイルフッダーメニュー表示がおかしい。
グレーアウトした様になっていてよく見ればかろうじてアイコンが透けて見える。
原因究明のためにChormeでページを表示。
デベロッパーモードCTRL+Shift+Iでデベロッパーツールを起動
スマホ表示に変更して対象となるアイコンの上で右クリックしてメニューから検証をクリック
どうやらフッター部分のクラスで色指定がおかしいっぽい
Cocoon子テーマのstyle.cssに以下を追記したらきれいに表示されるようになりました。
.mobile-footer-menu-buttons,
.navi-menu-content,
.mobile-footer-menu-buttons .menu-button > a,
.mobile-footer-menu-buttons .menu-button:hover,
.navi-menu-content a,
.navi-menu-content a:hover {
background: dimgray;
color: #fff;
}
綺麗に表示できるようになりました。
調べる上で参考にしたページ
コメント