[shone]

【お使いの Snow Monkey のバージョン】15.18.0
【お使いの Snow Monkey Blocks のバージョン】13.7.3
【お使いの Snow Monkey Editor のバージョン】6.2.1
【お使いのブラウザ】chrome

 

いつもお世話になっております。

表題の通り、モバイル表示時のドロワーナビゲーションでカスタマイズしたい点がいくつかあるのですが自力では解決できなかったためアドバイスいただけないでしょうか？

 

１．ハンバーガーメニュー展開時の色反転

現在、サイトカラーをデフォルトの赤基調に作成しておりまして、スマホ表示時のハンバーガーメニューも初期値の白で表示されている状態です。

ここでメニューを展開すると背景赤、文字白のメニューが表示されるのですが、このままではやや見づらいために背景色を白、文字色を黒に変更しました。

追加CSSに、

.c-drawer--overall {
background-color: fff;
color: #000;
}

.c-drawer {
background-color: #fff;
color: #000;

と記述することで背景色とテキスト色、ハンバーガーメニューの「MENU」の文字色は変更できたのですが、展開時のアイコン「×」が白のまま変わらず背景と同化してしまいます。。

メニュー展開時、アイコンの色を反転（変更）させて黒などにするにはどうすれば良いでしょうか？

 

２．各項目間に区切り線を付けたい

合わせまして、メニューの各項目間上下に区切りの線を入れたいと思っていますが、CSSを記述するだけでいけますでしょうか？

 

３．ドロワーナビゲーション内のロゴ表示

また現在ハンバーガーメニューを右側に表示しているのですが、その際反対側の左側にロゴを表示したいと思っております。デフォルトで表示する機能は無かったかな？と思うのですが、こちら表示する方法はございますでしょうか。

 

質問が多くなってしまったのですが…ちょうど１、２、３全てのカスタマイズのしたイメージが、ショーケースの下記事例サイト様のスマホメニューが理想に近い形でした。

DigitalCube LabWorks

URL : https://labworks.digitalcube.jp/ 制作者コメント Snow Mon…

snow-monkey.2inc.org

 

上記のようなカスタマイズをするためにはどうすれば良いでしょうか？アドバイスいただけますと幸いです。

何卒よろしくお願い致します。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

サポートフォーラムは同じ問題に遭遇した方がそのトピックを見て自力で解決できるように、1トピック1課題で投稿をお願いしています。このトピックは「１．ハンバーガーメニュー展開時の色反転」のものとして、あとの2つは別のトピックとして再度投稿をお願いします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

メニュー展開時、アイコンの色を反転（変更）させて黒などにするにはどうすれば良いでしょうか？

下記の CSS でどうでしょうか？

.c-drawer .c-hamburger-btn__bar {
  background-color: #000;
}

♥ 0

いいねをした人: 居ません

[shone]

＞キタジマさん

 

早速の返信ありがとうございます。

質問の件、失礼いたしました。別にトピック立てさせていただきます。

 

下記の CSS でどうでしょうか？

 

こちらありがとうございます。追加CSSに追記して希望の通りになりました！

その他の質問は別途トピックを立てさせていただきますのでこちらのトピックは閉じさせていただきます。

♥ 1

いいねをした人:

[投稿者]

投稿