<!-- ヘッダーナビ -->
<header id="headNav">
<ul>
<li ><a href="https://item.rakuten.co.jp/" target="_top"><img src="https://shop.r10s.jp/antelp/cabinet/banner1/enjoyhome-616.jpg" alt="画像"></a></li>
</ul>
<ul>
<li class="drawer-toggle-left">
<i class="fa fa-bars" aria-hidden="true" style="font-size:20px"></i>
</li>
<!--
<li class="drawer-toggle-left1">
<i class="fa fa-circle-thin" aria-hidden="true" style="font-size:20px"></i>
</li>
-->
<li class="headNav_cart">
<h1 class="font-alt"><a href="index_sp.html" target="_top" onclick="ga('send', 'event', ' sp_header_b', 'click', 'logo');"><img src="sp/3a/sp/shop/img/logo.png" alt="and Me..."></a></h1>
</li>
<li class="drawer-toggle-right">
<a href="https://sp.basket.step.rakuten.co.jp/rms/mall/bss/cartall/">
<i class="fa fa-shopping-cart" aria-hidden="true" style="font-size:20px"></i>
</a>
</li>
</ul>
</header>
<!-- ドロワーナビゲーション -->
<nav class="drawer-nav" role="navigation">
<div id="close_button"><a href="#headNav" onclick="jQuery.sidr('close','sidr-left');"><div class="icon-close"></div></a></div>
<div class="drawer-nav_wrapper">
<div id="sidr">
.
.
.
.icon-close {
position: relative;
width: 24px; /* ボタンのサイズ /
height: 24px; / ボタンのサイズ /
-webkit-appearance: none;
border-radius: 0;
}
.icon-close::before,
.icon-close::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 50% -15% auto 115%;
width: 100%;
height: 2px; / 線の太さ /
background: #fff; / 線の色 */
z-index: 99999999;
-webkit-appearance: none;
border-radius: 0;
}
.icon-close::before {
transform: rotate(45deg);
-webkit-appearance: none;
border-radius: 0;
}
.icon-close::after {
transform: rotate(-45deg);
-webkit-appearance: none;
border-radius: 0;
}
ハンバーガーメニューを開いた際に閉じるボタンがiPhone6だと表示されません。
表示する方法を教えていただきたいです。
よろしくお願いいたします。