スマホ表示にするとハンバーガーメニューのアイコンが横並びにならない

[pekorinko]

当該箇所のHTML

<div class="nav-item">
              <%= link_to "GitHubでログイン","/auth/github", class: "nav-link", method: :post %>
            </div>
            <div class="info-icon">
              <span class="font-weight-bold text-info" data-toggle="tooltip"
                title="ログインするとご自身が過去に調査した直近6件の調査結果を閲覧することが出来ます" data-placement="right">
                <i class="fas fa-info-circle"></i>
              </span>
            </div>

[pekorinko]

アイコンが改行されてしまった原因

• 「GitHubへログイン」しかメニューが無いためそもそもハンバガーメニューにする必要がない
• 改行の原因がclass: "nav-link"で有ることがわかった

  <div class="nav-item login_description">
          <%= link_to "GitHubでログイン","/auth/github", class: "nav-link", method: :post %>
          <span class="font-weight-bold text-info" data-toggle="tooltip"
            title="ログインするとご自身が過去に調査した直近6件の調査結果を閲覧することが出来ます" data-placement="right">
            <i class="fas fa-info-circle"></i>
          </span>
        </div>

• アイコンを使用するのであればnav-linkは消去する
  • nav-linkを消去すると普通のリンクの色になってしまいナビゲーションぽくない
• 「GitHubでログイン」自体をツールチップ化することでアイコンを使う必要がなくなる
  • ナビゲーションにアイコンを使用しているサイトがそもそも見当たらないため、アイコンは使用しない方向で進める