WordPressテーマSANGOの質問

ハンバーガーメニューを開いたところの上部タイトルを画像にしたい

アバター
yuki

大変お世話になっております。
スマホ用のハンバーガーメニューを開いたところの上部の「MENU」のタイトルを画像にすることは可能でしょうか?
イメージとしては、SANGOカスタマイズサイトのハンバーガーメニューを開いたタイトルのような感じです。
恐縮ですが、カスタマイズ方法をお教え願いたいです。
よろしくお願いします。

カスタマイザーでデザイン設定
カスタマイザーでデザインや細かな設定をしよう
コメントへの回答
サルワカくん
サルワカくん
2020/04/10

お世話になっております。
SANGOのハンバーガーメニュー(ナビドロワー)を開いたときのタイトル部分を画像にする方法ですが、以下のようにするのが手っ取り早いかと思います。

①カスタムHTMLをスマホ用ナビドロワー・ウィジェットのいちばん上に配置する

その中に画像(imgタグ)を書きます。

②CSSで「MENU」を無理やり消す

次に以下のようなCSSをダッシュボードの[外観]⇒[カスタマイズ]⇒[追加CSS]に貼り付けます(子テーマのstyle.cssでもOKかと思います)。

.drawer__content .drawer__title {
  color: transparent; /* 文字を見えなくする */
  background: transparent; /* 背景色を見えなくする */
  position: absolute; /* ×ボタンの位置を調整 */
  right: 0; /* ×ボタンの位置を調整 */
}

これにより、「MENU」部分が消え、カスタムHTMLの画像がいちばん上に配置されるようになります。

よろしくお願いします。

アバター
yuki
2020/04/11

お返事大変感謝致します。
教えていただいたこのコードを追加してみたのですが、MENUの文字が消えず閉じるボタンも崩れてしまっている状態です…
どうすれば良いですか?
お手数ですがよろしくお願いします。
.drawer__title {
color: transparent; /* 文字を見えなくする */
background: transparent; /* 背景色を見えなくする */
position: absolute; /* ×ボタンの位置を調整 */
right: 0; /* ×ボタンの位置を調整 */
}

サルワカくん
サルワカくん
2020/04/11

CSSの適用の優先順位が負けてしまっているようです。
最初のセレクタの部分を.drawer__content .drawer__title { }のようにしていただけますか?
(前投稿のコードも修正しておきました)

よろしくお願いします。

アバター
yuki
2020/04/12

出来ました!!大変感謝しております。今後ともよろしくお願いします!!