ナビゲーションバーのスマホ表示だとログインが表示されない

いつもお世話になります。
Laravel5.5、Bootstarp3でWebサイトを作成しております。
NavBarを作ったのですが、PC表示ではログインと登録が表示されますがスマホ表示でログインと登録が表示されず困っております。

ご教授の程よろしくお願いします。

navbar.blade.php

PHP
1<header>
2    <nav class="navbar navbar-default navbar-static-top">
3        <div class="container">
4            <div class="navbar-header">
5                <a class="navbar-left" href="/"><img src="{{ asset("images/logo.jpg") }}" height=40></a>
6            </div>
7            <div>
8            </div>
9            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
10                <ul class="nav navbar-nav navbar-right">
11                    <!-- Authentication Links -->
12                    @if (Auth::guest())
13                        <li><a href="{{ url('/user/login') }}">ログイン</a></li>
14                        <li><a href="{{ url('/user/register') }}">登録</a></li>
15                    @else
16                        <li class="dropdown">
17                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
18                                {{ Auth::user()->name }} <span class="caret"></span>
19                            </a>
20
21                            <ul class="dropdown-menu" role="menu">
22                                <li><a href="/user/page/{{Auth::user()->id}}">マイページ</a>
23                                </li>
24                                <li>
25                                    <a href="{{ url('/user/logout') }}"
26                                        onclick="event.preventDefault();
27                                                 document.getElementById('logout-form').submit();">
28                                        Logout
29                                    </a>
30
31                                    <form id="logout-form" action="{{ url('/user/logout') }}" method="POST" style="display: none;">
32                                        {{ csrf_field() }}
33                                    </form>
34                                </li>
35                            </ul>
36                        </li>
37                    @endif
38                </ul>
39                </ul>
40            </div>
41        </div>
42    </nav>
43</header>

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

回答1件

ベストアンサー

ハンバーガーメニューにするなら以下のように行うことが出来ます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>保活広場</title>
8    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
9    <link rel="stylesheet" href="http://hokatsupark.herokuapp.com/css/style.css">
10</head>
11<body>
12<header>
13    <nav class="navbar navbar-default navbar-static-top">
14        <div class="container">
15            <div class="navbar-header">
16                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
17                        data-target="#bs-example-navbar-collapse-1">
18                    <span class="sr-only">Toggle navigation</span>
19                    <span class="icon-bar"></span>
20                    <span class="icon-bar"></span>
21                    <span class="icon-bar"></span>
22                </button>
23                <a class="navbar-left" href="/">
24                    <img src="http://hokatsupark.herokuapp.com/images/logo.jpg" alt="保育園の情報サイト保活広場" height=40>
25                </a>
26            </div>
27
28            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
29                <ul class="nav navbar-nav navbar-right">
30                    <li><a href="http://hokatsupark.herokuapp.com/user/login">ログイン</a></li>
31                    <li><a href="http://hokatsupark.herokuapp.com/user/register">登録</a></li>
32                </ul>
33            </div>
34        </div>
35    </nav>
36</header>
37<div class="container">
38    <div class="features-clean">
39        <div class="container">
40            <center><img src="http://hokatsupark.herokuapp.com/assets/img/Hokatsu Hiroba Tate.png" width="300"
41                         alt="保育園情報サイト保活広場"></center>
42        </div>
43        <div class="container">
44            <div class="intro"></div>
45            <div class="row features">
46                <div class="col-md-4 col-sm-6 item">
47                    <i class="glyphicon glyphicon glyphicon-search icon" style="color:#40c8f4;font-size:36px;"></i>
48                    <h3 class="name">保育園を探す</h3>
49                    <p class="description">お住まいの市町村をクリックして保育園を探してみましょう。保育園の名前をクリックするとさらに詳しい情報が表示されます。</p>
50                </div>
51                <div class="col-md-4 col-sm-6 item">
52                    <i class="glyphicon glyphicon-ok icon" style="color:rgb(242,135,183);font-size:36px;"></i>
53                    <h3 class="name">保育園をチェックする</h3>
54                    <p class="description">ユーザー登録をすると気になる保育園をチェックすることができます。あとで比較したりするのに便利です。</p>
55                </div>
56                <div class="col-md-4 col-sm-6 item">
57                    <i class="glyphicon glyphicon-list-alt icon" style="color:rgb(253,184,52);font-size:36px;"></i>
58                    <h3 class="name">保育園のリストをつくる</h3>
59                    <p class="description">チェックした保育園はマイページに登録されていつでも確認できます。家族との共有も簡単です。</p>
60                </div>
61            </div>
62        </div>
63    </div>
64    <div class="container">
65        <div class="panel panel-info">
66            <div class="panel-heading">
67                <h3 class="panel-title" style="color:rgb(64,179,244);">
68                    <i class="glyphicon glyphicon-list-alt" style="font-size:36px;"></i>
69                    <b>市町村別保育園一覧</b>
70                </h3>
71            </div>
72            <div class="panel-body">
73                <div class="table">
74                    <table class="table table-striped">
75                        <thead>
76                        <tr>
77                            <th style="background-color:#cde7f4;">都道府県</th>
78                            <th style="background-color:#cfe8f5;">市町村名</th>
79                        </tr>
80                        </thead>
81                        <tbody>
82                        <tr>
83                            <td>神奈川県</td>
84                            <td>横浜市(<a href="/city/?city_name=横浜市鶴見区">鶴見区</a>、
85                                <a href="/city/?city_name=横浜市旭区">旭区</a>、
86                                <a href="/city/?city_name=横浜市神奈川区">神奈川区</a>、
87                                <a href="/city/?city_name=横浜市西区">西区</a>、
88                                <a href="/city/?city_name=横浜市中区">中区</a>、
89                                <a href="/city/?city_name=横浜市南区">南区</a>、
90                                <a href="/city/?city_name=横浜市港南区">港南区</a>、
91                                <a href="/city/?city_name=横浜市保土ヶ谷区">保土ヶ谷区</a>、
92                                <a href="/city/?city_name=横浜市旭区">旭区</a>、
93                                <a href="/city/?city_name=横浜市磯子区">磯子区</a>、
94                                <a href="/city/?city_name=横浜市金沢区">金沢区</a>、
95                                <a href="/city/?city_name=横浜市港北区">港北区</a>、
96                                <a href="/city/?city_name=横浜市緑区">緑区</a>、
97                                <a href="/city/?city_name=横浜市青葉区">青葉区</a>、
98                                <a href="/city/?city_name=横浜市都築区">都築区</a>、
99                                <a href="/city/?city_name=横浜市神奈川区">戸塚区</a>、
100                                <a href="/city/?city_name=横浜市神奈川区">栄区</a>、
101                                <a href="/city/?city_name=横浜市神奈川区">泉区</a>、
102                                <a href="/city/?city_name=横浜市神奈川区">瀬谷区区</a>）
103                            </td>
104                        </tr>
105                        <tr>
106                            <td>奈良県</td>
107                            <td><a href="/city/?city_name=奈良市">奈良市</a></td>
108                        </tr>
109                        </tbody>
110                    </table>
111                </div>
112            </div>
113        </div>
114    </div>
115    <div class="container">
116        <div class="panel panel-warning">
117            <div class="panel-heading">
118                <h3 class="panel-title" style="color:#ff66ff">
119                    <i class="glyphicon glyphicon-search" style="font-size:36px;"></i>保活広場からのお願い
120                </h3>
121            </div>
122            <div class="panel-body">
123                <span>保活広場は、個人で保育園情報を収集してまとめております。そのため十分に目が行き届いてないところもございます。ここが間違っているなどご指摘があればこちらまでご連絡をお願いします。</span>
124            </div>
125        </div>
126    </div>
127</div>
128<footer>
129    <div class="text-center text-muted">© 2018 保活広場.</div>
130</footer>
131<script src="http://hokatsupark.herokuapp.com/assets/js/jquery.min.js"></script>
132<script src="http://hokatsupark.herokuapp.com/assets/bootstrap/js/bootstrap.min.js"></script>
133</body>
134</html>

もしもハンバーガーメニューにしたくないのならば、以下のCSSを追記してください。

CSS
1@media (max-width: 768px) {
2    .navbar-header, .navbar-nav > li {
3        float: left;
4    }
5
6    .navbar-nav {
7        margin: 0 -15px;
8    }
9
10    .navbar-nav > li > a {
11        padding-top: 15px;
12        padding-bottom: 15px;
13        line-height: 20px;
14    }
15
16    .navbar-collapse.collapse {
17        display: block;
18        border-top: none;
19    }
20
21    .navbar-right {
22        float: right;
23    }
24
25    .navbar-nav.navbar-right:last-child {
26        margin-right: -15px;
27    }
28
29    .navbar-toggle {
30        display: none;
31    }
32}