メニューバーの下に「メニュー」の文字を入れたい

Question

ワードプレスのテーマ　birthというテーマを使用しているのですが、
(デモページhttps://demo.tcd-theme.com/tcd057/)

右上のメニューバーのすぐ下に「メニュー」の文字を追加したいと考えています。

その際どのようなcssを追加すれば良いのでしょうか？ちなみに記述場所は「css/responsive.css」ファイルだそうです。

ここに書くコードご教示ください🙇‍♂️🙇‍♂️

追加したい部分は画像の赤丸の部分です。

そしてデベロッパーツールではこのように表示されておりました

Comments

[hatena19]

メニューバーとは具体的にどれでしょうか。id名かclass名を使って説明してもらえますか。
メニューバーのどこにどのようなレイアウトで入れたいのでしょうか。
可能ならば、画像で図示してもらうと回答しやすいですね。

[nekokotk]

失礼しました！
画像とデベロッパーツールで表示されていたクラス名？を追加しました

何も知らず恐縮ですが、ぜひアドバイスよろしくお願いします。。。

[nekokotk]

赤丸の部分に「メニュー」と文字を入れたいと考えています。

[hatena19]

スマホサイズのときのハンバーガーメニューですね。了解しました。

[m.ts10806]

次空で結構ですので「WordPress」は質問タグとして入れておいてください。
※今からでも入れておいてもらった方がいいかも
CSSだけでは解決しない可能性もあるものです。

[nekokotk]

承知しました！

Answer 1

まず、CSSの記述場所ですが、ユーザーが独自のCSSを記述したいときは、「追加CSS」に記述するのをお勧めします。

テーマの本体の方のCSSに記述すると、本体に影響を与えたり、テーマをアップデイトしたときに上書きされて消えてしまったりします。

「追加CSS」だと、記述内容がすぐにプレビューで確認できるので、便利です。
使い方は下記を参考にしてください。

【追加cssとは】wordpressで追加CSSの使い方・CSS編集方法 - WEBST8のブログ

CSSのみでテキストを追加するには疑似要素とcontentを使います。
追加CSSに下記のコードを入力してみてください。

a#menu_button:after {
    content: "メニュー";
    font-size: 1.1em;
    position: absolute;
    left: 0;
    top: 1.5em;
}

文字の大きさや位置は適当に設定したので、font-size left top を修正してお好みに調整してください。

Comments

[nekokotk]

すごいです…！！！反映されました！！本当に感謝です

ありがとうございます！！！！わざわざありがとうございました🙇‍♂️🙇‍♂️🙇‍♂️🙇‍♂️🙇‍♂️