bootstrap / navbar ハンバーガーメニューカスタム

現在bootstrapにてナビゲーションを作成中です。何点かうまくいかない点がありますので、ご教授お願いいたします。

・bootstrapでは標準指定されていない、670px以下にウィンドウの幅がなった時にハンバーガーメニューを表示したい。

・ハンバーガーアイコンの見た目を下記の画像のようにしたい。

・ハンバーガーメニューを表示した際に以下の画像のようにしたい。

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" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
13        crossorigin="anonymous">
14
15    <style>
16        /* navigation */
17
18        body {
19            color: #333;
20            text-align: left;
21            margin: 0;
22            padding: 0;
23            background: #fff;
24            word-wrap: break-word;
25            overflow: visible;
26            font-family: Verdana, sans-serif !important;
27            /* font-family: Verdana, sans-serif; */
28            font-size: 16px;
29            line-height: 1.5;
30            letter-spacing: 0;
31            max-width: 940px;
32        }
33
34        /* 全体の幅 */
35
36        .inner-section {
37            width: 940px;
38            padding: 0;
39            margin: 0 auto;
40        }
41
42        /* トップページを非表示 */
43
44        .disp-sp {
45            display: none !important;
46        }
47
48        nav {
49            padding: 0;
50        }
51
52        .logo img {
53            width: 208px;
54        }
55
56        li.top_nav {
57            padding-right: 14px;
58            padding-left: 14px;
59        }
60
61        li.top_nav a {
62            font-size: 15px;
63            margin-top: 22px;
64            height: 58px;
65        }
66
67        li.top_nav a:hover {
68            color: #168eea !important;
69        }
70
71        span {
72            text-align: center;
73            letter-spacing: 0.15em;
74            font-size: 10px;
75            color: #dcdcdc;
76        }
77
78        @media screen and (max-width: 670px) {
79            /* 全体の幅 */
80            .inner-section {
81                width: auto;
82            }
83            /* トップページを表示 */
84            .disp-sp {
85                display: block !important;
86            }
87            /* spanクラスを非表示 */
88            .disp-pc {
89                display: none !important;
90            }
91            
92            li.top_nav a {
93                display: block !important;
94                padding: 13px 0 !important;
95                color: #666 !important;
96                text-decoration: none !important;
97                font-weight: normal !important;
98                font-size: 17px !important;
99                line-height: 1 !important;
100            }
101            li.top_nav a:hover {
102                color: #000 !important;
103            }
104        }
105    </style>
106</head>
107
108<body>
109
110    <!-- navigation -->
111
112    <div class="inner-section">
113        <nav class="navbar navbar-light bg-light navbar-expand-sm py-0 px-0">
114            <!-- クラスを2つ追加 -->
115
116            <!-- ナビロゴ -->
117            <a class="logo navbar-brand" href="step3_2.html">
118                <img src="images/logo.png" alt="">
119            </a>
120
121            <!-- メニューアイコン -->
122            <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
123                <span class="navbar-toggler-icon"></span>
124            </button>
125
126            <!-- メニュー -->
127            <div id="menu" class="collapse navbar-collapse justify-content-end">
128                <ul class="nav navbar-nav">
129                    <li class="top_nav nav-item text-center">
130                        <a class="nav-link" href="#">会社情報
131                            <span class="disp-pc navbar-text d-block py-0">COMPANY</span>
132                        </a>
133
134                    </li>
135                    <li class="top_nav nav-item text-center">
136                        <a class="nav-link" href="#">運営サービス
137                            <span class="disp-pc navbar-text d-block py-0">SERVICE</span>
138                        </a>
139
140                    </li>
141                    <li class="top_nav nav-item text-center">
142                        <a class="nav-link" href="#">お知らせ
143                            <span class="disp-pc navbar-text d-block py-0">NEWS</span>
144                        </a>
145
146                    </li>
147                    <li class="top_nav nav-item text-center">
148                        <a class="nav-link" href="#">採用情報
149                            <span class="disp-pc navbar-text d-block py-0">RECRUIT</span>
150                        </a>
151
152                    </li>
153                    <li class="top_nav nav-item text-center">
154                        <a class="nav-link " href="">お問合わせ
155                            <span class="disp-pc navbar-text d-block py-0">CONTACT</span>
156                        </a>
157
158                    </li>
159                    <li class="disp-sp top_nav nav-item text-center">
160                        <a class="nav-link" href="">トップページ</a>
161                    </li>
162                </ul>
163            </div>
164
165        </nav>
166    </div>
167    <!-- Optional JavaScript -->
168    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
169    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
170        crossorigin="anonymous"></script>
171    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
172        crossorigin="anonymous"></script>
173    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
174        crossorigin="anonymous"></script>
175</body>
176
177</html>

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

回答1件

bootstrapでは標準指定されていない、670px以下にウィンドウの幅がなった時にハンバーガーメニューを表示したい。

Bootstrap 4では、navbar-expand-*クラスでハンバーガーメニューの表示、非表示の設定が行われています。
Bootstrapにあるのはnavbar-expand-sm, navbar-expand-md, navbar-expand-lg, navbar-expand-xlクラスのみで、質問者さんが実現したい670px以下というのは用意されていません(参考)。そこで、navbar-expand-customクラスとして、671px以上でハンバーガーメニューを非表示にするようなCSSを用意します。

CSS
1@media screen and (min-width: 671px) {
2    .navbar-expand-custom {
3        flex-flow: row nowrap;
4        justify-content: flex-start;
5    }
6
7    .navbar-expand-custom .navbar-toggler {
8        display: none;
9    }
10
11    .navbar-expand-custom .navbar-collapse {
12        display: flex !important;
13        flex-basis: auto;
14    }
15
16    .navbar-expand-custom .navbar-nav {
17        flex-direction: row;
18    }
19
20    .navbar-expand-custom .navbar-toggler {
21        display: none;
22    }
23}

そして、これをnavbar-expand-*クラスの代わりに設定すれば、670px以下のウィンドウ幅でハンバーガーメニューが表示されるようになるはずです(動作確認用リンク)。

ハンバーガーアイコンの見た目を下記の画像のようにしたい。

ハンバーガーメニューのボーダー用にicon-barクラスを用意することで行えます。また、詳細は省略しますが、navbar-toggler-iconクラスのスタイルを変更することでも実現出来ると思います。

CSS
1.navbar-toggler {
2    padding: 10px;
3}
4
5.icon-bar {
6    display: block;
7    width: 3em;
8    height: .5em;
9    border-radius: 1px;
10    background: #000;
11}
12
13.icon-bar + .icon-bar {
14    margin-top: 3px;
15}

このクラスを設定する上で、HTMLにも多少変更を加える必要があります。

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta name="copyright" content="Copyright (C) dotinstall.com">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
9    <style>
10        body {
11            color: #333;
12            text-align: left;
13            margin: 0;
14            padding: 0;
15            background: #fff;
16            word-wrap: break-word;
17            overflow: visible;
18            font-family: Verdana, sans-serif !important;
19            font-size: 16px;
20            line-height: 1.5;
21            letter-spacing: 0;
22            max-width: 940px;
23        }
24
25        .inner-section {
26            width: 940px;
27            padding: 0;
28            margin: 0 auto;
29        }
30
31        .disp-sp {
32            display: none !important;
33        }
34
35        nav {
36            padding: 0;
37        }
38
39        .logo img {
40            width: 208px;
41        }
42
43        li.top_nav {
44            padding-right: 14px;
45            padding-left: 14px;
46        }
47
48        li.top_nav a {
49            font-size: 15px;
50            margin-top: 22px;
51            height: 58px;
52        }
53
54        li.top_nav a:hover {
55            color: #168eea !important;
56        }
57
58        span {
59            text-align: center;
60            letter-spacing: 0.15em;
61            font-size: 10px;
62            color: #dcdcdc;
63        }
64
65        @media screen and (min-width: 671px) {
66            .navbar-expand-custom {
67                flex-flow: row nowrap;
68                justify-content: flex-start;
69            }
70
71            .navbar-expand-custom .navbar-toggler {
72                display: none;
73            }
74
75            .navbar-expand-custom .navbar-collapse {
76                display: flex !important;
77
78                flex-basis: auto;
79            }
80
81            .navbar-expand-custom .navbar-nav {
82                flex-direction: row;
83            }
84
85            .navbar-expand-custom .navbar-toggler {
86                display: none;
87            }
88        }
89
90        @media screen and (max-width: 670px) {
91            .inner-section {
92                width: auto;
93            }
94
95            .disp-sp {
96                display: block !important;
97            }
98
99            .disp-pc {
100                display: none !important;
101            }
102
103            li.top_nav a {
104                display: block !important;
105                padding: 13px 0 !important;
106                color: #666 !important;
107                text-decoration: none !important;
108                font-weight: normal !important;
109                font-size: 17px !important;
110                line-height: 1 !important;
111            }
112
113            li.top_nav a:hover {
114                color: #000 !important;
115            }
116
117            .navbar-toggler {
118                padding: 10px;
119            }
120
121            .icon-bar {
122                display: block;
123                width: 3em;
124                height: .5em;
125                border-radius: 1px;
126                background: #000;
127            }
128
129            .icon-bar + .icon-bar {
130                margin-top: 3px;
131            }
132        }
133    </style>
134</head>
135<body>
136
137<!-- navigation -->
138
139<div class="inner-section">
140    <nav class="navbar navbar-light bg-light navbar-expand-custom py-0 px-0">
141        <!-- クラスを2つ追加 -->
142
143        <!-- ナビロゴ -->
144        <a class="logo navbar-brand" href="step3_2.html">
145            <img src="images/logo.png" alt="">
146        </a>
147
148        <!-- メニューアイコン -->
149        <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
150            <span class="icon-bar"> </span>
151            <span class="icon-bar"> </span>
152            <span class="icon-bar"> </span>
153        </button>
154
155        <!-- メニュー -->
156        <div id="menu" class="collapse navbar-collapse justify-content-end">
157            <ul class="nav navbar-nav">
158                <li class="top_nav nav-item text-center">
159                    <a class="nav-link" href="#">会社情報
160                        <span class="disp-pc navbar-text d-block py-0">COMPANY</span>
161                    </a>
162
163                </li>
164                <li class="top_nav nav-item text-center">
165                    <a class="nav-link" href="#">運営サービス
166                        <span class="disp-pc navbar-text d-block py-0">SERVICE</span>
167                    </a>
168
169                </li>
170                <li class="top_nav nav-item text-center">
171                    <a class="nav-link" href="#">お知らせ
172                        <span class="disp-pc navbar-text d-block py-0">NEWS</span>
173                    </a>
174
175                </li>
176                <li class="top_nav nav-item text-center">
177                    <a class="nav-link" href="#">採用情報
178                        <span class="disp-pc navbar-text d-block py-0">RECRUIT</span>
179                    </a>
180
181                </li>
182                <li class="top_nav nav-item text-center">
183                    <a class="nav-link " href="">お問合わせ
184                        <span class="disp-pc navbar-text d-block py-0">CONTACT</span>
185                    </a>
186
187                </li>
188                <li class="disp-sp top_nav nav-item text-center">
189                    <a class="nav-link" href="">トップページ</a>
190                </li>
191            </ul>
192        </div>
193    </nav>
194</div>
195<!-- Optional JavaScript -->
196<!-- jQuery first, then Popper.js, then Bootstrap JS -->
197<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
198<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
199<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"</script>
200</body>
201</html>