TCDテーマOOPS!・REHUB：スマホ表示時のハンバーガーメニュー下に文字を入れる方法

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

 
▼修正後変更箇所イメージ

基本的にはいずれのテーマも疑似要素を指定することで対応できるかと思いますので、是非お試しください。

関連記事

2024.07.29

TCDテーマSOLARIS・SERUM・NANO・FAKE：スマホ表示時のハンバーガーメニュー下に文字を入れる方法

Q.ハンバーガーメニューの下に「MENU」のような文字を追加することはできますか？ ▼変更箇所イメージ A.カスタムCSSで対応できます。（テーマのよって若干修正内容が異なります） 今回の記事では、テーマSOLARIS、SERUM、NANO、FAKEでスマホ表示時のハンバーガー...

2024.07.29

TCDテーマRIKYU：スマホ表示時のハンバーガーメニュー下に文字を入れる方法

Q.ハンバーガーメニューの下に「MENU」のような文字を追加することはできますか？ ▼変更箇所イメージ A.カスタムCSSで対応できます。（テーマのよって若干修正内容が異なります） 今回の記事では、テーマRIKYUでスマホ表示時のハンバーガーメニュー下に文字を追加する方法を紹介...

2024.07.29

TCDテーマGENESIS・ISSUE・SEEED：スマホ表示時のハンバーガーメニュー下に文字を入れる方法

Q.ハンバーガーメニューの下に「MENU」のような文字を追加することはできますか？ ▼変更箇所イメージ A.カスタムCSSで対応できます。（テーマのよって若干修正内容が異なります） 今回の記事では、テーマGENESIS、SEEED、ISSUEでスマホ表示時のハンバーガーメニュー...