2
display:blockボタンを#menu-btnに入れてメニューボタンをクリックした後に、ナビゲーションメニューにclass="responsive"を追加します。 SCSSに間違ったセレクタがあるかもしれないと私はコンソールでクラスが追加されているのを見ます。クリックしても何も起こりません。メディアクエリで応答性の高いカスタムクラスをモバイルメニューに追加する
$(document).ready(function(){
$('#btn-mobile').on('click',function(){
if($('#nav-top').hasClass('responsive')){
$('#nav-top').removeClass('responsive')
console.log('resp yes')
}else{
$('#nav-top').addClass('responsive')
console.log('resp no')
}
});
});#nav-top{
background-color: rgb(48, 48, 48);
width: 100%;
//min-height: 95px;
min-width: 240px;
display: flex;
align-items: center;
position: fixed;
z-index: 2;
#logo{
font-size: 47.644px;
font-family: "OleoScript-regular";
color: rgb(255, 255, 255);
margin: 20px 0;
}
#menu-btn{
font-size: 12px;
font-family: "Raleway";
color: rgb(255, 255, 255);
text-transform: uppercase;
text-align: center;
ul{
margin: 0;
padding: 0;
li{
padding:20px;
list-style: none;
display: inline-block;
padding: 10px;
background-color: rgb(48, 48, 48);
border-bottom: 3px solid transparent;
//cursor:pointer;
a{
text-decoration: none;
color: rgb(255, 255, 255);
width: 100%;
}
&:hover{
a{
border-bottom: 3px solid rgb(123, 108, 99);
}
}
}
}
}
#top-menu-cursor{
display: none;
#btn-mobile{
background:transparent;
border:none;
#btn-bar{
width: 30px;
height: 5px;
background: rgb(255, 255, 255);
margin: 5px 0;
border-radius: 2px;
}
}
}
}
@media screen and (max-width: 700px){
#nav-top{
display: inline-block;
#logo{
display: inline-block;
font-size: 40px;
}
#menu-btn{
display: none;
}
#top-menu-cursor{
display: flex;
align-items: center;
margin: 20px 0;
float: right;
}
}
.responsive{
#menu-btn{
display: block;
li{
height:50px;
width:100%;
}
}
}
}<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>navbar responsive</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<header>
<div id="bg-header-img">
<div class="container" id="nav-top">
<h1 class="col-md-offset-2 col-md-2" id="logo">Mairala</h1>
<div id="top-menu-cursor">
<button id="btn-mobile">
<div id="btn-bar"></div>
<div id="btn-bar"></div>
<div id="btn-bar"></div>
</button>
</div>
<div class="col-md-offset-2 col-md-6" id="menu-btn">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolios</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</header>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>