事態
これをスマホでハンバーガーメニューを押すと以下のようになります。
つまり、「ユーザー一覧」がページ最上部に出てしまい、「当サイトについて」「投稿一覧」が上に隠れてしまっています。
「当サイトについて」が一番上になるようにしたいのですが、どうしたらよいか自分で調べても分かりませんでした。
お手数ですがご教示頂けますと幸いです。
# _header.html.erb <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <% unless user_signed_in? %> <%= link_to(root_path, class: "navbar__brand") do %>Home<% end %> <% end %> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedConten" 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 align-items-center bg-light"> <li> <%= link_to(home_about_path, class: "nav-link") do %>当サイトについて<% end %> </li> <% if user_signed_in? %> <li> <%= link_to(posts_path, class: "nav-link") do %>投稿一覧<% end %> </li> <li> <%= link_to(users_path, class: "nav-link") do %>ユーザー一覧<% end %> </li> <li> <%= link_to(user_path(current_user), class: "nav-link") do %>マイページ<% end %> </li> <li> <%= link_to(destroy_user_session_path, method: :delete, class: "nav-link") do %>ログアウト<% end %> </li> <% else %> <li> <%= link_to(new_user_session_path, class: "nav-link") do %>ログイン<% end %> </li> <li> <%= link_to(new_user_registration_path, class: "nav-link") do %>サインアップ<% end %> </li> <% end %> </ul> <% if user_signed_in? %> <% unless request.path == '/posts/new' %> <ul class="navbar-nav ml-md-auto align-items-center"> <li> <%= link_to "投稿", new_post_path, class: "btn btn-primary post-btn" %> </li> </ul> <% end %> <% end %> </div> </div> </nav>
# navbar.scss navbar { height: 50px; border-bottom: 1px solid rgba(0, 0, 0, .0975); z-index: 2; background-color: white; &__brand { font-size: 22px; font-weight: bold; margin-left: 20px; width: auto; background-size: 114px; } &-nav { & > li { margin-left: 20px; } } }
回答2件
あなたの回答
tips
プレビュー