drawerメニューで×ボタンで閉じるとハンバーガーアイコンが消えてしまう

drawerメニューを設置しております。
問題なく動いているのですが、１つだけ、メニューを開いた後に×ボタンでメニューを閉じた時に、
ハンバーガーアイコンも一緒に消えてしまいます。
メニュー以外の部分をクリックしても閉じるのですが、この場合はアイコンは消えません。
何か解決策はないでしょうか。
ご教授いただければ幸いです。

HTML

<div id="spheader" class="sp_only">
<div class="header_l"><a href="/"><img src="/img/sp/logo.png" alt=""></a></div>
<div class="header_r">
		<button type="button" class="drawer-toggle drawer-hamburger">
			<span class="sr-only">toggle navigation</span>
			<span class="drawer-hamburger-icon"></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="/concept">コンセプト</a></li>
				<li><a class="drawer-menu-item" href="/menu3">メニュー３</a></li>
				<li><a class="drawer-menu-item" href="/menu4">メニュー４</a></li>
				<li><a class="drawer-menu-item" href="/menu5">メニュー５</a></li>
				<li><a class="drawer-menu-item" href="/menu6">メニュー６</a></li>
				<li><a class="drawer-menu-item" href="/menu7">メニュー７</a></li>
				<li><a class="drawer-menu-item" href="/menu8">メニュー８</a></li>
				<li><a class="drawer-menu-item" href="/menu9">メニュー９</a></li>

</ul>
</nav>
</div>
</div>

CSS

.drawer-hamburger {/* トグルの位置調整など　固定にするときはposition:fix;*/
position:absolute;
right:10px;
top:5vw;
    width: 40px;
    height:40px;
        padding: 7px 8px 10px 10px;
     background-color:#f08437;
    box-sizing: border-box;
    border-radius:5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    line-height:20px;
    z-index:99999;
        }
.drawer-hamburger-icon {
  margin-top:5px
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {/* トグルの色調整*/
     background-color:#fff;
}
.drawer-hamburger-txt{
    color:#fff;
    font-size:50%;
    font-weight:bold;
display:block;
margin-top:15px;
}
.drawer-nav {/* トグル開いた後のメニューの全体構成 */
background-color:rgba(240,132,55,0.8);
z-index:99999;
}
ul.drawer-menu {
  width: 90%;
  margin: 0 auto; }

.drawer-menu-item {
  padding: 10px 10px 6px  10px;
  display: block;
  color: #fff;
  border-bottom: 1px solid #ffb783;
  font-size: 14px; 
  text-align:center;
  }
  .drawer-menu-item:visited {
    color: #fff; }
  .drawer-menu-item:hover {
    color: #fff; }
  .drawer-menu-item:link {
    color: #fff; }
.bnone{
    border:none !important;
}
   li.menubtn .drawer-menu-item{
        border:none;
     padding: 16px 10px 16px 10px;
     border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
    background-color:rgba(119,16,47,0.6);
    margin-bottom:10px;
}
    li.menubtn .drawer-menu-item .fa{
margin-right:15px;
}
   li.menubtn_tel .drawer-menu-item{
    text-align:center;
    background-color:#ba0631;
  padding: 10px 0;
    margin:40px 0 10px 0;
        border:none;
}
   li.menubtn_tel .drawer-menu-item img{
width:100%;
margin:0 auto;
}

javascript

/*drawerメニュー*/
$(document).ready(function() {
	 $('.drawer').drawer();
});

行動規範の内容に同意します

回答2件

自己解決しました！
クローズした時の色が消えていただけだったので、

.drawer-close .drawer-hamburger {
     background-color:#f08437;
}

を追加したらバッチリでした。
回答いただいたbfkさん、ありがとうございました！

投稿2018/07/09 07:23

heyhey...

総合スコア40

ベストアンサー

javascriptのコードが足りないようなのですが、これはdrawer.jsのようなライブラリを使用しているということでしょうか？？

投稿2018/07/09 02:11

bfk

総合スコア21

heyhey...

2018/07/09 06:18

回答ありがとうございます。その通りです。 footerで<script src="/js/drawer.js"></script> を読み込んでおります。ちなみにwordpressです。 headerで読み込むとjavascriptが動きませんでした。自前のテーマではなく他者のテーマのカスタマイズなので、このような事態になったことがなく、原因の追究が出来ないです。。＞＜

bfk

2018/07/09 07:11

javascriptに記述のある、$('.drawer')のclassがhtml側に存在しないようなので、htmlのソースも足りないのかもしれません…

heyhey...

2018/07/09 07:15

情報が足りない箇所だらけで申し訳ございません。 <body class="drawer drawer--right"> で読み込んでおります！ drawerではbodyタグにこれを入れるのが必須のようです http://git.blivesta.com/drawer/ 動いてはいるのでCSSの追記とかでなんとかなりそうな気がしているのですが、、ハンバーガーアイコンが消えないでいるにはどうしたらいいでしょうか・・

bfk

2018/07/09 07:22

ちなみにですが、↑で貼って頂いたリンク先に以下のcssを読むように指定がありますがこれは読んでいますでしょうか？？ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">

行動規範の内容に同意します

あなたの回答