質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

982閲覧

[Bootstrap4]ハンバーガーメニューを押して表示される項目がズレてしまう

yokoyanmo

総合スコア12

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

2クリップ

投稿2019/03/09 06:43

編集2019/03/09 06:46

事態

navbarを以下のように作成しています。
イメージ説明

これをスマホでハンバーガーメニューを押すと以下のようになります。
イメージ説明

つまり、「ユーザー一覧」がページ最上部に出てしまい、「当サイトについて」「投稿一覧」が上に隠れてしまっています。
「当サイトについて」が一番上になるようにしたいのですが、どうしたらよいか自分で調べても分かりませんでした。
お手数ですがご教示頂けますと幸いです。

# _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; } } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/03/09 09:04

CSS,HTMLにしたあとの結果で貼り付けて質問スべきです。 回答のためにテンプレートエンジン変換前の状態から想像しろというのは回答率の低下になりますよ
yokoyanmo

2019/03/09 13:49

大変失礼しました。 今後気を付けていきたいと思うのですが、初心者すぎて確認させてください。 CSS、HTMLにしたあとの結果で…というのはどういうことでしょうか? コードを挿入する際に、 ```HTML 〜 ``` とすべきということでしょうか?
退会済みユーザー

退会済みユーザー

2019/03/09 14:00

ちがう。 ブラウザで見える方の HTML,CSS
yokoyanmo

2019/03/09 14:20

そういうことですか、承知しました。
guest

回答2

0

ベストアンサー

(再現したのですが、隠れることはなかったのですが)
CSSで最初に設定しているnavbarを現在はnavbarタグにheight:50px;を当てている設定ですが、.navbarとnavbarクラスに当てていて、height:50px;に収まっていないのかもしれないです!
height:50px;をコメントアウトしてみるとどうでしょうか?

投稿2019/03/09 08:46

hatsu

総合スコア1809

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yokoyanmo

2019/03/09 13:31

ご回答頂きありがとうございます! hatsuさんの方法でキレイに修正できました。 大変助かりました、また勉強になりました。
guest

0

headerの固定分が隠れていると推測されますので、
headerの高さ分、margin-topなどで下へ下げる処理で解決できそうですが、
いかがでしょう。

.navbar { margin-top:50px; }

投稿2019/03/09 09:06

編集2019/03/09 09:06
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yokoyanmo

2019/03/09 13:37

試してみましたがレイアウトがちょっと崩れてしまいました>_< ただご回答頂けて大変嬉しいです、どうもありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問