Q.ハンバーガーメニューの下に「MENU」のような文字を追加することはできますか？
▼変更箇所イメージ
A.テーマにもよりますが、カスタムCSSで対応できます。
今回の記事では、テーマ「OOPS!」でスマホ表示時のハンバーガーメニュー下に文字を追加します。
以下のCSSをカスタムCSSエリアに記載してください。
ハンバーガーメニュー下に文字を追加
▼テーマ「OOPS!」参考CSS
#js-menu-button:after{
display: block;
content: "MENU";
width: 60px;
font-size: 8px;
color: #fff;
margin-top: -45px;
}
ハンバーガーメニューの実装はテーマによって少し記述が違いますので、全く同じCSSで調整することはできない場合が多いです。例えば別テーマ「REHUB」の場合は、以下のようなCSSでのカスタマイズが必要です。
▼テーマ「REHUB」参考CSS
#js-menu-button:after{
display: block;
content: "MENU";
font-size: 8px;
color: #000;
margin-top: 8px;
}
@media (max-width: 767px) {
button.p-menu-button {
height: 68px;
}
}
}
▼修正後変更箇所イメージ
基本的にはいずれのテーマも疑似要素を指定することで対応できるかと思いますので、是非お試しください。
関連記事
Q.ハンバーガーメニューの下に「MENU」のような文字を追加することはできますか？ ▼変更箇所イメージ A.カスタムCSSで対応できます。（テーマのよって若干修正内容が異なります） 今回の記事では、テーマSOLARIS、SERUM、NANO、FAKEでスマホ表示時のハンバーガー...
TCDテーマRIKYU：スマホ表示時のハンバーガーメニュー下に文字を入れる方法
Q.ハンバーガーメニューの下に「MENU」のような文字を追加することはできますか？ ▼変更箇所イメージ A.カスタムCSSで対応できます。（テーマのよって若干修正内容が異なります） 今回の記事では、テーマRIKYUでスマホ表示時のハンバーガーメニュー下に文字を追加する方法を紹介...
Q.ハンバーガーメニューの下に「MENU」のような文字を追加することはできますか？ ▼変更箇所イメージ A.カスタムCSSで対応できます。（テーマのよって若干修正内容が異なります） 今回の記事では、テーマGENESIS、SEEED、ISSUEでスマホ表示時のハンバーガーメニュー...
この記事は役に立ちましたか？
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます！