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

return-to-normal-from-mega-menu-thumbnail

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;
	}
}

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

CSSを追加すると通常のドロップダウンメニューに戻ります

CSSを追加すると通常のドロップダウンメニューに戻ります

そもそものメニュー幅を調整したい方はこちらの記事をご参考ください。

global-menu-css-thumbnail
グローバルメニューの幅を調整する方法を紹介します。 Healerのグローバルメニューの幅は固定となっているため、 長い文字にしてしま
return-to-normal-from-mega-menu-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。