製作中のwebサイトを確認するため、Chromeのデベロッパーツールでスマホ画面を見ると一部反映されていないのですが、どうしてでしょうか?表示されないのは動画の上に配置したSNSとハンバーガーメニューのボタンです。因みにPC用の画面では表示されます。
【全文】
HTML
!-- ハンバーガーメニュー 丸が左上から拡大 -->
<div class="openbtn"><span></span><span></span><span></span></div>
<nav id="g-nav">
<div id="g-nav-list"><!--ナビの数が増えた場合縦スクロールするためのdiv※不要なら削除-->
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
</div>
</nav>
<div class="circle-bg"></div>
<!----------- sns ------------>
<div class="sns">
<div class="facebook-btn">
<a href="https://www.facebook.com/akami.kodomoen?ref=py_c/" target="_blank" rel="noopener" title="facebook">
<img src="img/ico-facebook-tiny.svg" alt="facebook"></a>
</div>
<div class="instagram-btn">
<a href="https://www.instagram.com/akami_kodomoen/" target="_blank" rel="noopener" title="Instagram">
<img src="img/ico-instagram-tiny.svg" alt="Instagram"></a>
</div>
<div class="youtube-btn">
<a href="http://akamikids.blog95.fc2.com/blog-entry-7286.html/" target="_blank" rel="noopener" title="youtube">
<img src="img/ico-youtube.svg" alt="youtube"></a>
</div>
</div>
CSS
=====ハンバーガーメニューボタン====
/*navメニュー*/
/*アクティブになったエリア*/
#g-nav.panelactive{
/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
position:fixed;
z-index: 999;
top: 0;
width:100%;
height: 100vh;
}
/*丸の拡大*/
.circle-bg{
position: fixed;
z-index:800;
/*丸の形*/
width: 100px;
height: 100px;
border-radius: 50%;
background: #deb887;
opacity: 0.9;
/*丸のスタート位置と形状*/
transform: scale(0);/*scaleをはじめは0に*/
right:-50px;
top:-50px;
transition: all .6s;/*0.6秒かけてアニメーション*/
}
.circle-bg.circleactive{
transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}
/*ナビゲーションの縦スクロール*/
#g-nav-list{
display: none;/*はじめは表示なし*/
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999;
width: 100%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#g-nav.panelactive #g-nav-list{
display: block; /*クラスが付与されたら出現*/
}
/*ナビゲーション*/
#g-nav ul {
opacity: 0;/*はじめは透過0*/
/*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
opacity:1;
}
/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*リストのレイアウト設定*/
#g-nav li{
text-align: center;
list-style: none;
}
#g-nav li a{
color: #ffffff;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 30px;
line-height: 45px;
}
@media (max-width: 600px) {
#g-nav li a{
font-size: 19px;
line-height: 35px;
}
}
/*========= ボタンのためのCSS ==========*/
.openbtn{
position: fixed;
top:30px;
right: 200px;
z-index: 9999;/*ボタンを最前面に*/
cursor: pointer;
width: 60px;
height: 60px;
margin: 0 20px;
background-color: #ffffff;
border: 0px solid #ffffff;
border-radius: 50%;
}
/*×に変化*/
.openbtn span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 10px;
height: 4px;
border-radius: 2px;
background-color: #7fbfff; /*元のカラー#ffa500*/
width: 26px;
}
.openbtn span:nth-of-type(1) {
top:13px;
margin-top: 5px;
margin-left: 7px;
}
.openbtn span:nth-of-type(2) {
top:23px;
margin-top: 5px;
margin-left: 7px;
}
.openbtn span:nth-of-type(3) {
top:33px;
margin-top: 5px;
margin-left: 7px;
}
.openbtn.active span:nth-of-type(1) {
top: 17px;
transform: translateY(6px) rotate(-45deg);
width: 36px;
margin-top: 5px;
margin-left: 2px;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3){
top: 30px;
transform: translateY(-6px) rotate(45deg);
width: 36px;
margin-top: 5px;
margin-left: 2px;
}
/*---------- responsive ----------*/
@media (max-width: 600px) {
.openbtn {
width: 48px;
height: 48px;
right: -4px;
}
.openbtn span {
width: 23px;
height: 3px;
}
.openbtn span:nth-of-type(1) {
top: 7.5px;
left: 6px;
margin-top: 9px;
}
.openbtn span:nth-of-type(2) {
top: 13px;
left: 6px;
margin-top: 10px;
}
.openbtn span:nth-of-type(3) {
top: 18.5px;
left: 6px;
margin-top: 11px;
}
.openbtn.active span:nth-of-type(1) {
top: 12px;
transform: translateY(6px) rotate(-45deg);
width: 27px;
margin-top: 5px;
margin-left: 5px;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3){
top: 25px;
transform: translateY(-6px) rotate(45deg);
width: 27px;
margin-top: 5px;
margin-left: 5px;
}
}
============SNSボタン=============
/*-----sns-----*/
.sns {
position: fixed;
display: flex;
flex-wrap: wrap;
top: 30px;
/*left: 88%;*/
right: 25px;
height: 60px;
z-index: 10; /*photoより上へ*/
/*width: 150px;*/
}
.facebook-btn img {
width: 30px;
}
.facebook-btn {
display: flex;
background-color: #ffffff;
border-radius: 20px 0 0 20px;
padding: 15px 15px;
/*border: solid 1px #ffffff;*/
}
.instagram-btn img {
width: 30px;
}
.instagram-btn {
display: flex;
background-color: #ffffff;
padding: 15px 15px;
/*border: solid 1px #ffffff;*/
}
.youtube-btn img {
width: 30px;
}
.youtube-btn {
display: flex;
background-color: #ffffff;
border-radius: 0 20px 20px 0;
padding: 15px 15px;
/*border: solid 1px #ffffff;*/
}
/*---------- responsive ----------*/
@media (max-width: 600px) {
.sns {
top: 90px;
width: 30px;
/*left: 88%;*/
right: 25px;
height: 60px;
z-index: 10; /*photoより上へ*/
/*width: 150px;*/
}
.facebook-btn img {
width: 24px;
}
.facebook-btn {
display: flex;
background-color: #ffffff;
border-radius: 12px 12px 0 0 ;
padding: 6px 6px;
/*border: solid 1px #ffffff;*/
}
.instagram-btn img {
width: 24px;
}
.instagram-btn {
display: flex;
background-color: #ffffff;
padding: 6px 6px;
/*border: solid 1px #ffffff;*/
}
.youtube-btn img {
width: 24px;
}
.youtube-btn {
display: flex;
background-color: #ffffff;
border-radius: 0 0 12px 12px ;
padding: 6px 6px;
/*border: solid 1px #ffffff;*/
}
}
JAVA SCRIPT
//g-nav メニュー
$(".openbtn").click(function () {//ボタンがクリックされたら
$(this).toggleClass('active');//ボタン自身に activeクラスを付与し
$("#g-nav").toggleClass('panelactive');//ナビゲーションにpanelactiveクラスを付与
$(".circle-bg").toggleClass('circleactive');//丸背景にcircleactiveクラスを付与
});
$("#g-nav a").click(function () {//ナビゲーションのリンクがクリックされたら
$(".openbtn").removeClass('active');//ボタンの activeクラスを除去し
$("#g-nav").removeClass('panelactive');//ナビゲーションのpanelactiveクラスを除去
$(".circle-bg").removeClass('circleactive');//丸背景のcircleactiveクラスを除去
});