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

現在、bootstrap3を勉強しているのですが、
ウィンドウの幅を小さくした際にハンバーガーメニューが表示されません。
ご教示いただけないでしょうか。
ナビゲーション部分を抜粋したソースは以下です。

HTML
1<!doctype html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <!-- Bootstrapで使うCSSの読み込み-->
6        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
7        <title>Sample Web Page</title>
8    </head>
9    <body>
10        <nav class="navbar navbar-inverse navbar-fixed-top">
11        	 <!-- モバイル表示用の省略メニュー -->
12            <div class="navbar-header">
13                <button type="button" class="navbar-toggle collapse" data-target="#header__nav__link">
14                    <span class="icon-bar"></span>
15                    <span class="icon-bar"></span>
16                    <span class="icon-bar"></span>
17                </button>
18                <a class="navbar-brand" href="#">周辺情報ページ</a>
19            </div>
20            
21            <!-- ナビゲーションメニュー -->
22            <div id="header__nav__link" class="collapse navbar-collapse">
23                <ul class="nav navbar-nav">
24                    <li><a href="#">TOP</a></li>
25                    <li><a href="#searchAddressArea">住所</a></li>
26                    <li><a href="#wheatherArea">天気</a></li>
27                </ul>
28            </div>
29        </nav>
30        <!-- jQueryの読み込み-->
31        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
32        <!-- Bootstrapで使うJavaScriptの読み込み-->
33		<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
34    </body>
35</html>

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

回答1件

ベストアンサー

bootstrap3詳しくないですがまずは下記のパスに「https:」を追加した方が良いと思います。
（デザイン違いますがこちらで再現した限りではパスの解消さえすれば反映されました。）

  <!-- jQueryの読み込み-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Bootstrapで使うJavaScriptの読み込み-->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- Bootstrapで使うCSSの読み込み-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <title>Sample Web Page</title>
    </head>
    <body>

  <style>
    .contents-item2 {
    margin: 0px 250px;
    width: 979px;
    height: 300px;
  }

  .contents-item3 {
    margin: 100px 250px;
    width: 979px;
    height: 300px;
  }

  .contents-item4 {
    margin: 100px 250px;
    width: 979px;
    height: 300px;
  }

  .top-wrapper3 {
    height: 882.5px;
    width: 1480px;
  }

  .section-title3 {
    padding: 100px 688px;
    color: #333333;
    font-size: 40px
  }

  .contents-item5 {
    margin: 0px 250px 79px;
    display: flex;
  }

  .column1, .column3 {
    flex-basis: 50%;
    font-size: 20px;
  }

  .column2 {
    width: 30px;
    /*(1)*/
  }

  .top-wrapper4 {
    width: 1480px;
    height: 950px;
  }

  .neko-photo {
    position: relative;
  }

  .box {
    position: absolute;
    top: 101px;
    left: 629px;
    background-color: #FFFFFF;
    opacity: 0.5;
    width: 600px;
    height: 600px;
  }

  .box p {
    color: black;
    font-size: 20px;
    padding: 98px 75px 52px 75px;
  }

  .section-title4 {
    margin-top: 100px;
    text-align: center;
    font-size: 40px;
    margin-bottom: 95.5px
  }

  .comment1 {
    font-family: bold;
    margin: 0px 251px 12.5px;
  }

  .border1 {
    border-top: 1px solid;
    width: 979.5px;
    height: 13.5px;
  }

  .comment1 h4 {
    font-size: 16px;
    padding-right: 14px;
  }

  .comment1 p {
    padding-left: 37px;
  }

  .comment2 {
    margin: 0px 251px 12.5px;
  }

  .comment2 h4 {
    font-size: 16px;
    padding-right: 14px;
  }

  .comment2 p {
    padding-left: 37px;
  }

  .border2 {
    border-top: 1px solid;
    width: 979.5px;
    height: 13.5px;
  }

  .comment3 {
    margin: 0px 251px 12.5px;
  }

  .comment3 h4 {
    font-size: 16px;
    padding-right: 14px;
  }

  .comment3 p {
    padding-left: 37px;
  }

  .border3 {
    border-top: 1px solid;
    width: 979.5px;
    height: 13.5px;
  }

  .comment4 {
    margin: 0px 251px 12.5px;
  }

  .comment4 h4 {
    font-size: 16px;
    padding-right: 14px;
  }

  .comment4 p {
    padding-left: 37px;
  }

  .border4 {
    border-top: 1px solid;
    width: 979.5px;
    height: 13.5px;
  }

  .comment5 {
    margin: 0px 251px 12.5px;
  }

  .comment5 h4 {
    font-size: 16px;
    padding-right: 14px;
  }

  .comment5 p {
    padding-left: 36px;
  }

  .border5 {
    border-top: 1px solid;
    width: 979.5px;
    height: 13.5px;
  }



    </style>

    <nav class="navbar navbar-inverse">
  	<div class="container-fluid">
  		<div class="navbar-header">
  			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample7">
  				<span class="sr-only">Toggle navigation</span>
  				<span class="icon-bar"></span>
  				<span class="icon-bar"></span>
  				<span class="icon-bar"></span>
  			</button>
  			<a class="navbar-brand" href="#">
  				タイトル
  			</a>
  		</div>

  		<div class="collapse navbar-collapse" id="navbarEexample7">
  			<ul class="nav navbar-nav">
  				<li><a href="#">メニューＡ</a></li>
  				<li class="active"><a href="#">メニューＢ</a></li>
  				<li><a href="#">メニューＣ</a></li>
  			</ul>
  			<p class="navbar-text navbar-right">ようこそ <a href="#" class="navbar-link">ゲスト</a> さん。</p>
  		</div>
  	</div>
  </nav>

  <!-- jQueryの読み込み-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Bootstrapで使うJavaScriptの読み込み-->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>
</html>