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

画面をスマホサイズにした時にハンバーガメニューが表示されるはずなのですが見えません。

Googleの検証ツールでヘッダーにハンバーガーメニューが存在していることは確認できるのですが、見えません。
CSSをあてても効いていないみたいです。

よろしくお願いいたします。

scss
1:root {
2  --main-bg-color: #284a66;
3  --main-header-border: #FFD700;
4  --main-border: #696969;
5  --main-color: #fff;
6  --main-content-bg-color: #1f4566;
7}
8
9
10
11// index //////////////////////////////////////////////////
12.jumbotron {
13  padding-top: var(--jumbotron-padding-y);
14  padding-bottom: var(--jumbotron-padding-y);
15  margin-bottom: 0;
16  background-image: url("klimt2.jpg");
17  background-position:center bottom;
18  border: solid var(--main-border) 1px;
19}
20@media (min-width: 768px) {
21  .jumbotron {
22    padding-top: calc(var(--jumbotron-padding-y) * 2);
23    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
24  }
25}
26.bg-mask {
27  height: 100%;
28  background: rgba(255,255,255,0.9);
29  border-radius: 20px; 
30  padding-bottom: 10px;
31  border: solid var(--main-border) 1px;
32}
33
34#logo {
35  font-size: 2em;
36  color: #fff;
37}
38
39.jumbotron p:last-child {
40  margin-bottom: 0;
41}
42
43.jumbotron-heading {
44  font-weight: 300;
45  font-family: "Wawati SC";
46}
47
48.jumbotron .container {
49  max-width: 40rem;
50}
51
52footer {
53  padding-top: 3rem;
54  padding-bottom: 3rem;
55  border-top: solid var(--main-border) 1px;
56  margin-top: 30px;
57}
58
59footer p {
60  margin-bottom: .25rem;
61}
62
63.box-shadow {       // 記事一覧の子要素 影
64  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .6);
65  transition: all 0.1s;
66}
67.box-shadow:hover { 
68  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, 1);
69  transition: all 0.1s;
70}
71
72.album {      // 記事一覧の子要素
73  background-image: url("klimt.jpg");
74  background-size: cover;
75  border-radius: 20px;
76  border: solid var(--main-border) 1px;
77}
78
79.navbar {
80  border-bottom: solid var(--main-header-border) 1px;
81  background-color: var(--main-content-bg-color);
82}
83
84.navbar1 {
85  border-radius: 20px;
86  border: solid var(--main-border) 1px;
87  background-color: var(--main-content-bg-color);
88  color: var(--main-color);
89  font-size: 1.2em;
90  margin-top: 10px;
91  margin-bottom: 6px;
92  text-align: center;
93}
94
95.navbar-toggler {               //ここです。 CSSが効きません。
96  border-color: #ffffff;
97  background-color: #000000;
98}
99
100#string-white {
101  color: var(--main-color);
102}
103
104.background-color {
105  background-color: var(--main-bg-color);
106  padding-top: 90px;
107}
108
109.card {       // 記事一覧の子要素 一つあたりの大きさ
110  height: 300px;
111  max-width: 100%; 
112}
113
114.content-image {      // 記事一覧の子要素 画像サイズ
115  width: 100%;
116  max-height: 200px;
117  border: solid var(--main-border) 1px;
118  border-radius: 10px;
119}
120
121.content-title {
122  margin: 5px;
123}
124
125
126// show //////////////////////////////////////////////////
127.show-content {
128  background-color: #fff;
129  margin: 60px 0;
130  padding: 20px;
131  border-bottom: solid var(--main-border) 1px;
132  border: solid var(--main-border) 1px;
133  background-color: var(--main-content-bg-color);
134  color: #fff;
135  border-radius: 20px;
136}
137
138.title {
139  padding-bottom: 10px;
140  border-bottom: solid var(--main-border) 1px;
141}
142
143.trix-content {
144  font-size:  1.4em;
145}
146
147  // pagination //////////////////////////////////////////////////
148p {
149  font-size: 1.5em;
150  margin: 50px 0;
151  line-height: normal;
152}
153
154.pagination>li>a {          
155  border: none;     /*枠線をなくす*/
156  color: #696969;   /*文字の色を変える*/
157}
158
159/* 表示しているページ番号のデザイン */
160.pagination>.active>a {     
161  background: #93c9ff;     /*背景の色を変える*/
162  border-radius: 15px;     /*角を丸くする*/
163}
164
165/*ホバー時のデザイン*/
166.pagination>li>a:hover {        
167  border-radius: 15px;    /*角を丸くする*/
168}
169
170.pagination {
171  justify-content: center;
172}
173
174
175  // 記事のコメント ///////////////////////////////////////////////////
176.show-comment {
177  margin-bottom: 60px;
178}
179
180.comment-title {
181  color: #adff2f;
182  font-weight: 300;
183  font-family: "Wawati SC";
184  border-bottom: solid var(--main-border) 1px;
185  margin-bottom: 30px;
186}
187
188.comment-content {
189  color: #adff2f;
190  font-size: 1em;
191}
192
193.comment-field {
194  color: #a9a9a9;
195  margin-top: 15px;
196  margin-bottom: 5px;
197}
198
199  // フォーム ///////////////////////////////////////////////////////////
200.image-field {
201  color: #fff;
202}
203
204.category-field {
205  color: #fff;
206}
207
208// tweets/new.html.erb & /edit.html.erb //////////////////////////////////////////////
209.tweet-titles {
210  color: #adff2f;
211  font-family: "Wawati SC";
212}
213
214

header
1<div class='fixed-top'>
2    <nav class="navbar navbar-expand-lg">
3        <%= link_to "oh,&nbsp;<b>SUSHI</b>&nbsp;!!".html_safe, root_path, class: "navbar-brand", id: "logo" %>
4        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
5            <span class="navbar-toggler-icon"></span>
6        </button>
7
8        <div class="collapse navbar-collapse" id="navbarSupportedContent">
9            <ul class="navbar-nav mr-auto">
10                <%# <li class="nav-item">
11                    <a class="nav-link" href="#" id="string-white">Link</a>
12                </li> %>
13                <li class="nav-item dropdown">
14                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
15                        カテゴリー
16                    </a>
17                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
18                        <% @categories.each do |category| %>
19                        <%= link_to "#{category.name}", "categories/#{category.id}", class: "dropdown-item" %>
20                        <% end %>
21                        <a class="dropdown-item" href="#"></a>
22                        <div class="dropdown-divider"></div>
23                        <%# <a class="dropdown-item" href="#">Something else here</a> %>
24                    </div>
25                </li>
26                <%# </ul>
27            <form class="form-inline my-2 my-lg-0">
28                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
29                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
30            </form> %>
31        </div>
32    </nav>
33</div>