Bootstrap / ハンバーガメニューが表示されない

bootstrapにてハンバーガーメニューを作りたいと考えています。
しかし、クラスに規定したsmallサイズ以下になった際に、ハンバーガーが表示されません。原因を教えていただければ幸いです。

HTML


<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="copyright" content="Copyright (C) dotinstall.com">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="3_2.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
        crossorigin="anonymous">

</head>

<body>

    <!-- navigation -->

    <div class="inner-section">
        <nav class="navbar navbar-expand-sm py-0 px-0">
        
            <!-- ナビロゴ -->
            <a class="logo navbar-brand" href="step3_2.html">
                <img src="images/logo.png" alt="">
            </a>

            <!-- メニューアイコン -->
            <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- メニュー -->
            <div id="menu" class="collapse navbar-collapse justify-content-end">
                <ul class="nav navbar-nav justify-content-end">
                    <li class="top_nav nav-item text-center">
                        <a class="nav-link" href="#">会社情報
                            <span class="navbar-text d-block py-0">COMPANY</span>
                        </a>

                    </li>
                    <li class="top_nav nav-item text-center">
                        <a class="nav-link" href="#">運営サービス
                            <span class="navbar-text d-block py-0">SERVICE</span>
                        </a>

                    </li>
                    <li class="top_nav nav-item text-center">
                        <a class="nav-link" href="#">お知らせ
                            <span class="navbar-text d-block py-0">NEWS</span>
                        </a>

                    </li>
                    <li class="top_nav nav-item text-center">
                        <a class="nav-link" href="#">採用情報
                            <span class="navbar-text d-block py-0">RECRUIT</span>
                        </a>

                    </li>
                    <li class="top_nav nav-item text-center">
                        <a class="nav-link" href="">お問合わせ
                            <span class="navbar-text d-block py-0">CONTACT</span>
                        </a>

                    </li>
                </ul>
            </div>
        
        </nav>
    </div>
<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
        crossorigin="anonymous"></script>
</body>

</html>

css

/* navigation */
nav {
  padding: 0;
}
.logo img {
  width: 208px;
}
li.top_nav {
  padding-right: 14px;
  padding-left: 14px;
}
li.top_nav a {
  font-size: 15px;
  margin-top: 22px;
  height: 58px;
}
li.top_nav a:hover{
  color: #168eea;
}
.nav-link {
  color: #000;
}
span {
  text-align: center;
  letter-spacing: 0.15em;
  font-size: 10px;
  color: #dcdcdc;
}
```言語
HTML、CSS、Bootstrap


### 試したこと

script要素の挿入不足を見直しました

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

macOS High Sierra / Google chrome

m.ts10806

2018/07/07 04:02

navbar-expand-sm　は意味分かってつけているんですよね？

退会済みユーザー

2018/07/07 04:14

意味分かってつけてなきゃ、「クラスに規定したsmallサイズ以下になった際～」なんて書かんでしょうなぁ･･･

DarkAnt80000

2018/07/07 05:16

理解していたつもりですが、言葉の表現がおかしかったなら申し訳ないです。

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

回答1件

ベストアンサー

実際は、質問者さんのコードでも、ハンバーガーメニューは存在します。ハンバーガーボタンに対してスタイルを設定していないことで、見えないだけです。
以下のようにすることで、質問者さんの問題が解決すると思いますが、いかがでしょうか？

HTML
1<!doctype html>
2<html lang="en">
3
4<head>
5    <!-- Required meta tags -->
6    <meta charset="utf-8">
7    <meta name="copyright" content="Copyright (C) dotinstall.com">
8    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9
10    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
11    <!-- Bootstrap CSS -->
12    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
13          integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
14          crossorigin="anonymous">
15
16    <style>
17        /* navigation */
18        nav {
19            padding: 0;
20        }
21
22        .logo img {
23            width: 208px;
24        }
25
26        li.top_nav {
27            padding-right: 14px;
28            padding-left: 14px;
29        }
30
31        li.top_nav a {
32            font-size: 15px;
33            margin-top: 22px;
34            height: 58px;
35        }
36
37        li.top_nav a:hover {
38            color: #168eea;
39        }
40
41        .nav-link {
42            color: #000;
43        }
44
45        span {
46            text-align: center;
47            letter-spacing: 0.15em;
48            font-size: 10px;
49            color: #dcdcdc;
50        }
51    </style>
52</head>
53
54<body>
55
56<!-- navigation -->
57
58<div class="inner-section">
59    <nav class="navbar navbar-light bg-light navbar-expand-sm py-0 px-0"> <!-- クラスを2つ追加 -->
60
61        <!-- ナビロゴ -->
62        <a class="logo navbar-brand" href="step3_2.html">
63            <img src="images/logo.png" alt="">
64        </a>
65
66        <!-- メニューアイコン -->
67        <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
68            <span class="navbar-toggler-icon"></span>
69        </button>
70
71        <!-- メニュー -->
72        <div id="menu" class="collapse navbar-collapse justify-content-end">
73            <ul class="nav navbar-nav justify-content-end">
74                <li class="top_nav nav-item text-center">
75                    <a class="nav-link" href="#">会社情報
76                        <span class="navbar-text d-block py-0">COMPANY</span>
77                    </a>
78
79                </li>
80                <li class="top_nav nav-item text-center">
81                    <a class="nav-link" href="#">運営サービス
82                        <span class="navbar-text d-block py-0">SERVICE</span>
83                    </a>
84
85                </li>
86                <li class="top_nav nav-item text-center">
87                    <a class="nav-link" href="#">お知らせ
88                        <span class="navbar-text d-block py-0">NEWS</span>
89                    </a>
90
91                </li>
92                <li class="top_nav nav-item text-center">
93                    <a class="nav-link" href="#">採用情報
94                        <span class="navbar-text d-block py-0">RECRUIT</span>
95                    </a>
96
97                </li>
98                <li class="top_nav nav-item text-center">
99                    <a class="nav-link" href="">お問合わせ
100                        <span class="navbar-text d-block py-0">CONTACT</span>
101                    </a>
102
103                </li>
104            </ul>
105        </div>
106
107    </nav>
108</div>
109<!-- Optional JavaScript -->
110<!-- jQuery first, then Popper.js, then Bootstrap JS -->
111<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
112        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
113        crossorigin="anonymous"></script>
114<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
115        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
116        crossorigin="anonymous"></script>
117<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
118        integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
119        crossorigin="anonymous"></script>
120</body>
121
122</html>

投稿2018/07/07 04:01

s8_chu

総合スコア14731

DarkAnt80000

2018/07/07 04:17

回答ありがとうございます。記述し損ねて申し訳ないですのですが、 <link rel="stylesheet" href="3_2.css">にて、スタイルは記述しておりました。念のため、ご回答いただいた通りHTMLの方にも書いてみたのですが、やはり表示されません。

s8_chu

2018/07/07 04:21

> やはり表示されません。私が回答に記述したコードをそのまま実行した場合にも、ハンバーガーアイコンは表示されませんか？

DarkAnt80000

2018/07/07 05:15

解決しました！記述していなかったコンテナー相当のクラスがwidth:940pxとしていていたため、画面を縮小した時に、画面外にハンバーガーアイコンが位置していて見えなかったようです。またもや、記述損なってしまい申し訳ないです。 s8_chuさんに詰めていただいたおかげで、原因点にだいぶ近づけました。ありがとうございました。＜未記載だったが適用されていたもの＞ .inner-section { width: 940px; padding: 0; margin: 0 auto; } ＜加えたモノ＞ ※正確には670px以下にしたかったため、smではなく670pxにしています。 @media screen and (max-width: 670px) { .inner-section { width: auto; } }

s8_chu

2018/07/07 05:24

なるほど。無事に解決できたようで良かったです。あとは、適当に質問を解決済みにしておいてください。

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