drawer.jsで閉じるボタンの色変更をしたい

Question

drawer.jsでトグルメニューをクリックしたあと、閉じるボタンに変化しますがこの色の変更をする際はどのCSSを触ればよいのか分かりません。
どなたかご教授くださいませ。

吐き出されているソース

<button type="button" class="drawer-toggle drawer-hamburger">
			<span class="sr-only">toggle navigation</span>
			<span class="drawer-hamburger-icon"></span><span class="drawer-hamburger-txt">MENU</span>
		</button>
		<nav class="drawer-nav" role="navigation">
			<ul class="drawer-menu">
				<li><a class="drawer-menu-item" href=""></a></li>
				<li><a class="drawer-menu-item" href=""></a></li>
				<li><a class="drawer-menu-item" href=""></a></li>
				<li><a class="drawer-menu-item" href=""></a></li>
				<li><a class="drawer-menu-item" href=""></a></li>
			       </ul>
			       </nav>

https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.js
https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.css

Comments

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[heyhey...]

わかりました！ご指摘ありがとうございます、以後気をつけます

[kei344]

ここは「質問への追記・修正の依頼」です。本文を編集することが出来ますので、よろしくお願いします。

Answer 1

デベロッパーツールでたどってみましたが、

.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  width: 100%;
  height: 2px;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  background-color: #222;
}

この部分のbackground-colorをいじれば色が変わるようです。ただし×ボタンだけでなく、トグルメニューボタンの色も一緒に変わってしまうので、×ボタンだけにしたいならjavascriptか何かで書く必要がありそうですね。

Comments

[heyhey...]

やっぱり・・そうですよね、、そんなスキルはないです。。困りました＠〜＠

[退会済みユーザー]

いろいろ試しましたが、javascriptで変更するのもきついですね。どうしてもというならボタン部分を一から作成したほうがよさそうです。

[heyhey...]

そうですか・・クライアントと相談してみます。試して頂いてありがとうございました！

Answer 2

.drawer-open .drawer-hamburger-icon::after,
.drawer-open .drawer-hamburger-icon::before {
	background-color: #922;
}

Comments

[heyhey...]

ありがとうございます！これで色は変わるのですが、メニューの背景に隠れてしまって見えなくなるんですよね。。z-indexの値を大きくしてもダメでした。

[kei344]

質問内容が変わっていますね。問題が起きるサイトのURL、もしくは状況の再現が可能なHTML/CSSを質問文に追記ください。