navにかかっているuser agent stylesheetのdisplay blockを解除したい

ハンバーガーメニュー作ってChromeブラウザで表示してみると、ハンバーガーメニュー内のメニューが消えません。CSSで該当クラスにdisplay:noneはかけてあります。調べてみるとuser agent stylesheetでdisplay:blockが適用されているので消えてくれないようです。

エディターからHTMLを開けた時は、980pxに設定してあるブレイクポイントでちゃんと表示・非表示になります。

HOME画面にある別のNavバーは何故か普通にdisplay:noneでブラウザでも消えてくれ、問題なく動作します。

ブラウザ上でもちゃんと動かすにはどうやってuser agent stylesheetのdisplay:blockを打ち消すことができますか

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="./css/normalize.css">
7  <link rel="stylesheet" href="./css/style.css">
8  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
9  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
10  crossorigin="anonymous"></script>
11  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
12  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
13  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
14  <title>title</title>
15  </head>
16
17<body>
18 <!-- ハンバーガーメニュー -->
19 <div class="hamburger">
20  <span></span>
21  <span></span>
22  <span></span>
23 </div>
24 <nav class="globalMenuSp">
25  <ul>
26    <li><a href="index.html">HOME</a></li>
27    <li><a href="category.html">CATEGORY</a></li>
28    <li><a href="news.html">NEWS</a></li>
29    <li><a href="about.html">ABOUT</a></li>
30    <li><a href="contact.html">CONTACT</a></li>
31  </ul>
32 </nav>
33    <Script>
34      $(function() {
35    $('.hamburger').click(function() {
36        $(this).toggleClass('active');
37 
38        if ($(this).hasClass('active')) {
39            $('.globalMenuSp').addClass('active');
40        } else {
41            $('.globalMenuSp').removeClass('active');
42        }
43      });
44    });
45    </Script>
46</body>

CSS
1.globalMenuSp{
2  display: none;
3}
4
5@media screen and (min-width:980px){
6.globalMenuSp{
7  display: block;
8}
9
10.globalMenuSp {
11  position: fixed;
12  z-index : 2;
13  top  : 0;
14  left : 0;
15  color: #fff;
16  background: rgba(0,0,0,0.7);
17  text-align: center;
18  width: 100%;
19  opacity: 0;
20  transition: opacity .6s ease, visibility .6s ease;
21}
22
23nav.globalMenuSp ul {
24  margin: 0 auto;
25  padding: 0;
26  width: 100%;
27}
28
29nav.globalMenuSp ul li {
30  list-style-type: none;
31  padding: 0;
32  width: 100%;
33  transition: .4s all;
34}
35
36nav.globalMenuSp ul li:last-child {
37  padding-bottom: 0;
38}
39
40nav.globalMenuSp ul li:hover{
41  background :#ddd;
42}
43
44nav.globalMenuSp ul li a {
45  display: block;
46  color: #fff;
47  padding: 1em 0;
48  text-decoration :none;
49}
50
51/* このクラスを、jQueryで付与・削除する */
52nav.globalMenuSp.active {
53  opacity: 100;
54}
55}

試したこと

リセットCSSのHTML5 Doctor CSS Resetを入れてもダメでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2020/07/17 04:20

ご提示のコードを試してみましたが、user agent stylesheet は打ち消されていました。環境の問題かと思います。

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

回答2件

自己解決

確認ありがとうございます。おっしゃる通り打ち消しはされていて、単にHTML内のRespsive.cssを読み込む記述に誤りがあったようです。

ありがとうございました。

投稿2020/07/17 04:25

masaiku

総合スコア5

これでいけるかと


.globalMenuSp{
  display: none;
}
.globalMenuSp.active{
  display: block;
}

投稿2020/07/17 04:10

編集2020/07/17 04:14

wing283

総合スコア123

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！