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

Question

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

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

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

:root {
  --main-bg-color: #284a66;
  --main-header-border: #FFD700;
  --main-border: #696969;
  --main-color: #fff;
  --main-content-bg-color: #1f4566;
}



// index //////////////////////////////////////////////////
.jumbotron {
  padding-top: var(--jumbotron-padding-y);
  padding-bottom: var(--jumbotron-padding-y);
  margin-bottom: 0;
  background-image: url("klimt2.jpg");
  background-position:center bottom;
  border: solid var(--main-border) 1px;
}
@media (min-width: 768px) {
  .jumbotron {
    padding-top: calc(var(--jumbotron-padding-y) * 2);
    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
  }
}
.bg-mask {
  height: 100%;
  background: rgba(255,255,255,0.9);
  border-radius: 20px; 
  padding-bottom: 10px;
  border: solid var(--main-border) 1px;
}

#logo {
  font-size: 2em;
  color: #fff;
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 300;
  font-family: "Wawati SC";
}

.jumbotron .container {
  max-width: 40rem;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
  border-top: solid var(--main-border) 1px;
  margin-top: 30px;
}

footer p {
  margin-bottom: .25rem;
}

.box-shadow {       // 記事一覧の子要素 影
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .6);
  transition: all 0.1s;
}
.box-shadow:hover { 
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, 1);
  transition: all 0.1s;
}

.album {      // 記事一覧の子要素
  background-image: url("klimt.jpg");
  background-size: cover;
  border-radius: 20px;
  border: solid var(--main-border) 1px;
}

.navbar {
  border-bottom: solid var(--main-header-border) 1px;
  background-color: var(--main-content-bg-color);
}

.navbar1 {
  border-radius: 20px;
  border: solid var(--main-border) 1px;
  background-color: var(--main-content-bg-color);
  color: var(--main-color);
  font-size: 1.2em;
  margin-top: 10px;
  margin-bottom: 6px;
  text-align: center;
}

.navbar-toggler {               //ここです。 CSSが効きません。
  border-color: #ffffff;
  background-color: #000000;
}

#string-white {
  color: var(--main-color);
}

.background-color {
  background-color: var(--main-bg-color);
  padding-top: 90px;
}

.card {       // 記事一覧の子要素 一つあたりの大きさ
  height: 300px;
  max-width: 100%; 
}

.content-image {      // 記事一覧の子要素 画像サイズ
  width: 100%;
  max-height: 200px;
  border: solid var(--main-border) 1px;
  border-radius: 10px;
}

.content-title {
  margin: 5px;
}


// show //////////////////////////////////////////////////
.show-content {
  background-color: #fff;
  margin: 60px 0;
  padding: 20px;
  border-bottom: solid var(--main-border) 1px;
  border: solid var(--main-border) 1px;
  background-color: var(--main-content-bg-color);
  color: #fff;
  border-radius: 20px;
}

.title {
  padding-bottom: 10px;
  border-bottom: solid var(--main-border) 1px;
}

.trix-content {
  font-size:  1.4em;
}

  // pagination //////////////////////////////////////////////////
p {
  font-size: 1.5em;
  margin: 50px 0;
  line-height: normal;
}

.pagination>li>a {          
  border: none;     /*枠線をなくす*/
  color: #696969;   /*文字の色を変える*/
}

/* 表示しているページ番号のデザイン */
.pagination>.active>a {     
  background: #93c9ff;     /*背景の色を変える*/
  border-radius: 15px;     /*角を丸くする*/
}

/*ホバー時のデザイン*/
.pagination>li>a:hover {        
  border-radius: 15px;    /*角を丸くする*/
}

.pagination {
  justify-content: center;
}


  // 記事のコメント ///////////////////////////////////////////////////
.show-comment {
  margin-bottom: 60px;
}

.comment-title {
  color: #adff2f;
  font-weight: 300;
  font-family: "Wawati SC";
  border-bottom: solid var(--main-border) 1px;
  margin-bottom: 30px;
}

.comment-content {
  color: #adff2f;
  font-size: 1em;
}

.comment-field {
  color: #a9a9a9;
  margin-top: 15px;
  margin-bottom: 5px;
}

  // フォーム ///////////////////////////////////////////////////////////
.image-field {
  color: #fff;
}

.category-field {
  color: #fff;
}

// tweets/new.html.erb & /edit.html.erb //////////////////////////////////////////////
.tweet-titles {
  color: #adff2f;
  font-family: "Wawati SC";
}

<div class='fixed-top'>
    <nav class="navbar navbar-expand-lg">
        <%= link_to "oh,&nbsp;<b>SUSHI</b>&nbsp;!!".html_safe, root_path, class: "navbar-brand", id: "logo" %>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <%# <li class="nav-item">
                    <a class="nav-link" href="#" id="string-white">Link</a>
                </li> %>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        カテゴリー
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <% @categories.each do |category| %>
                        <%= link_to "#{category.name}", "categories/#{category.id}", class: "dropdown-item" %>
                        <% end %>
                        <a class="dropdown-item" href="#"></a>
                        <div class="dropdown-divider"></div>
                        <%# <a class="dropdown-item" href="#">Something else here</a> %>
                    </div>
                </li>
                <%# </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form> %>
        </div>
    </nav>
</div>

Comments

[gouf]

問題の切り分け・前提として、たとえば Codepen ( http://codepen.io/ ) のようなサイトに HTML + SCSS 単体で動作するというのは確認済みでしょうか