Wordpressでハンバーガーリストの表示変更する方法

Question

前提・実現したいこと

グローバルナビのハンバーガーリストを変更したい。
WordpressのKarunaというテーマを利用して、現在サイトを構築しています。
スマホ等のデバイスでの閲覧したときのハンバーガーメニューを現在の表記から変更したいと考えております。

![
という表記の日本語部分を削除したいのですが、どこの記述を変更したらよいのかがわからず、苦戦しております。

試したこと

cssにdisplay:none;を追加
.menu-toggle→
ハンバーガーリスト事消えてしまう。
button, input[type="button"], input[type="reset"], input[type="submit"], .button→効果なし

お手数ですが、どの部分を変更すればよいのかを教えてください。
よろしくお願いします。

Answer 1

テスト用のWordpressにKarunaをインストールして試してみました。

<button class="menu-toggle" aria-controls="top-menu" aria-expanded="false">
  <span class="genericon genericon-menu"></span>メニュー
</button>

検証ツールで確認すると、上記のようなHTMLになっていました。
ハンバーガーアイコンはspanで囲まれているのですが、メニューはタグで囲まれていないので、メニューだけdisplay:none;にはできません。仕方ないので、フォントサイズを0にして見えないようにします。

ということで下記のようなCSSでできました。

.menu-toggle {
	font-size: 0;
	padding: 5px;	
}
.genericon-menu {
	margin-left: 8px;
}

• フォントサイズを0にして「メニュー」を消す。
• その分ボタンが小さくなるので、padding で調整。
• ハンバーガーアイコンが左に寄るのでmargin-leftで調整。

Comments

[julie]

ありがとうございます！無事メニューが消えました。