メガメニューを通常のドロップダウンメニューに戻す
2019年2月14日
カスタマイズ
カスタマイズ

Healerはメニュー幅があまりないため、
文字の段落落ちが起きてしまう方が多くいらっしゃいました。
そこで幅広のメガメニューを導入したのですが、
今度はサブメニューの数が少ないとスカスカのメニューになってしまいます。
やはり、利用用途が人によって異なるので、
万人に合うテーマ制作はとても難しいです。
どうしようかなと考えまして、
メガメニューをドロップダウンメニューに戻すCSSを作りましたので紹介します。
メガメニューを通常のドロップダウンメニューに戻す方法
テーマカスタマイザーでCSSを追加する
WordPress管理画面 >
以下のCSSを追加してください。
@media screen and (min-width: 768px) { #mainmenu ul li ul:hover a:hover, #mainmenu ul li ul:hover a:active { padding-left: .5em; box-shadow: none; background: rgba(100,100,100,0.3); } #mainmenu ul li.menu-item-has-children { position: relative; } #mainmenu ul li.menu-item-has-children ul.sub-menu::after { position: absolute; } .menu > ul > li > ul { padding: 10px; } .menu > ul > li > ul > li { width: 100%; } .menu > ul > li > ul > li a { width: 100%; color: #fff !important; border-bottom: none; } }
すると、このようなドロップダウンメニューに戻すことができます。

CSSを追加すると通常のドロップダウンメニューに戻ります
そもそものメニュー幅を調整したい方はこちらの記事をご参考ください。

グローバルメニューの幅を調整する方法を紹介します。
Healerのグローバルメニューの幅は固定となっており、
長い文字にしてしまうと