railsアプリ　Bootstrap4でヘッダーとナビゲーションバーの２段を固定したい

Bootstrap4でヘッダーとナビゲーションバーの２段を上段で固定したいのですが、ナビゲーションバーが最上段で重なってしまいます。

padding等でナビゲーションバーの開始位置を変えたり、試しましたがうまくいきませんでした。

他に方法等はございませんでしょうか。

ご教授お願い致します。

cssはいじっておりません。

下記ソースコードです。

  <body>
    
    <header class="container-fluid sticky-top">
        <h1 class="col d-flex align-items-center"><a class="text-white" href="/">Miniblog</a></h1>
      <ul class="row d-flex align-items-center">
        <li class="col"><%= link_to "LOGEIN", new_user_session_path, class: "text-white" unless user_signed_in? %></li>
        <li class="col"><%= link_to "LOGEOUT", destroy_user_session_path, method: :delete, class: "text-white" if user_signed_in? %></li>
        <li class="col"><a class="text-white" href="/tweets/new">NEW</a></li>
      </ul>
    </header>
    
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
        <a class="navbar-brand" href="#">Navbar</a>
        <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 active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">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">
                Dropdown
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </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>
    
    <%= yield %>
  </body>

行動規範の内容に同意します

回答1件

ベストアンサー

Bootstrap の sticky-top クラスは top: 0 を適用しているため、それらが sticky コンテナの最上部で重なります。これを回避するための 1 つの解決策として、 top プロパティにヘッダー分の高さを設定する、という方法があります (動作確認用リンク)。

HTML
1<body>
2
3  <header class="container-fluid sticky-top">
4    <h1 class="col d-flex align-items-center"><a class="text-white" href="/">Miniblog</a></h1>
5    <ul class="row d-flex align-items-center">
6      <li class="col"><a href="#" class="text-white">LOGEIN</a></li>
7      <li class="col"><a href="#" class="text-white">LOGEOUT</a></li>
8      <li class="col"><a class="text-white" href="/tweets/new">NEW</a></li>
9    </ul>
10  </header>
11
12  <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top sticky-top-offset">
13    <a class="navbar-brand" href="#">Navbar</a>
14    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
15      <span class="navbar-toggler-icon"></span>
16    </button>
17
18    <div class="collapse navbar-collapse" id="navbarSupportedContent">
19      <ul class="navbar-nav mr-auto">
20        <li class="nav-item active">
21          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
22        </li>
23        <li class="nav-item">
24          <a class="nav-link" href="#">Link</a>
25        </li>
26        <li class="nav-item dropdown">
27          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
28            Dropdown
29          </a>
30          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
31            <a class="dropdown-item" href="#">Action</a>
32            <a class="dropdown-item" href="#">Another action</a>
33            <div class="dropdown-divider"></div>
34            <a class="dropdown-item" href="#">Something else here</a>
35          </div>
36        </li>
37        <li class="nav-item">
38          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
39        </li>
40      </ul>
41      <form class="form-inline my-2 my-lg-0">
42        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
43        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
44      </form>
45    </div>
46  </nav>
47
48
49  <div class="content"></div>
50</body>

CSS
1body {
2  background: #111;
3}
4
5.content {
6  width: 100%;
7  height: 200vh;
8}
9
10.sticky-top-offset {
11  top: 100px;
12}

もしくは、単に sticky-top クラスを指定する要素を header 要素にまとめることでも問題が解決します (動作確認用リンク)。

HTML
1<body>
2  <header class="container-fluid sticky-top">
3    <div class="row">
4      <h1 class="col-12 d-flex align-items-center"><a class="text-white" href="/">Miniblog</a></h1>
5      <div class="col">
6        <ul class="row d-flex align-items-center">
7          <li class="col"><a href="#" class="text-white">LOGEIN</a></li>
8          <li class="col"><a href="#" class="text-white">LOGEOUT</a></li>
9          <li class="col"><a class="text-white" href="/tweets/new">NEW</a></li>
10        </ul>
11      </div>
12    </div>
13    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
14      <a class="navbar-brand" href="#">Navbar</a>
15      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
16        <span class="navbar-toggler-icon"></span>
17      </button>
18
19      <div class="collapse navbar-collapse" id="navbarSupportedContent">
20        <ul class="navbar-nav mr-auto">
21          <li class="nav-item active">
22            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
23          </li>
24          <li class="nav-item">
25            <a class="nav-link" href="#">Link</a>
26          </li>
27          <li class="nav-item dropdown">
28            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
29              Dropdown
30            </a>
31            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
32              <a class="dropdown-item" href="#">Action</a>
33              <a class="dropdown-item" href="#">Another action</a>
34              <div class="dropdown-divider"></div>
35              <a class="dropdown-item" href="#">Something else here</a>
36            </div>
37          </li>
38          <li class="nav-item">
39            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
40          </li>
41        </ul>
42        <form class="form-inline my-2 my-lg-0">
43          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
44          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
45        </form>
46      </div>
47    </nav>
48  </header>
49  <div class="content"></div>
50</body>

CSS
1body {
2  background: #111;
3}
4
5.content {
6  width: 100%;
7  height: 200vh;
8}

投稿2020/03/26 16:37

s8_chu

総合スコア14731

negimaguro

2020/03/27 17:10

ご回答いただきありがとうございます。複数の分かり易い解決策を提示いただいたことで非常に参考になりました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

railsアプリ　Bootstrap4でヘッダーとナビゲーションバーの２段を固定したい

関連した質問