【CSS】WordPress「Lightning」のハンバーガーメニューのカスタマイズ
WordPressのテーマとして、Lightningをけっこう利用しております。
日本語の無料テーマとして、とても使いやすいテーマだと思います。
Lightningで困ることと言えば、 iPad横でグローバルメニューとハンバーガーメニューが同時に出る、ということがあります。
特に私的に使用している分には同時に出ていても「ま、いっか」で済むことなんですが、ユーザーに対してカスタマイズする場合、グローバルメニューとハンバーガーメニューが同時に出ると困ってしまう、ということがあります。
そこで、 iPad横で同時にメニューが出ないようにするには以下のコードを CSSに追記してあげれば大丈夫です。
1 2 3 4 5 |
/* ハンバーガーメニューをipad横で出さない */ @media (min-width: 992px){ body.device-mobile .vk-mobile-nav-menu-btn { display: none; } } |
現在ではデフォルトでハンバーガーメニューが左になっているWordPressのテーマ「Lightning」ですが、ユーザビリティを考えると右にあるほうがいいと思うんです。
そこで、右にするための cssを記載します。
1 2 3 4 5 |
/* ハンバーガーメニューを右に */ .vk-mobile-nav-menu-btn{ right: 25px; left: inherit; } |
スカラヴィジョンは WordPressでの WEBサイトデザイン制作、既存サイトの編集・更新も行っております。
「新しく会社やお店をオープンするからホームページを作りたい」など、デザインに関する事ならいつでもお気軽にご相談下さい。