メガメニューを通常のドロップダウンメニューに戻す

2019年2月14日
カスタマイズ

Healerはメニュー幅があまりないため、
文字の段落落ちが起きてしまう方が多くいらっしゃいました。

そこで幅広のメガメニューを導入したのですが、
今度はサブメニューの数が少ないとスカスカのメニューになってしまいます。

やはり、利用用途が人によって異なるので、
万人に合うテーマ制作はとても難しいです。

どうしようかなと考えまして、
メガメニューをドロップダウンメニューに戻すCSSを作りましたので紹介します。

メガメニューを通常のドロップダウンメニューに戻す方法

テーマカスタマイザーでCSSを追加する

WordPress管理画面 > 外観 > カスタマイズ > 追加CSSと進み、
以下の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;
	}
}

すると、このようなドロップダウンメニューに戻すことができます。