【bootstrap】固定ヘッダーについて

bootstrapのnavbarをスクロールしても動かないよう以下のように
ヘッダーを２段重ねたいのですがうまくいきません。
どうすれば、navbarを２行固定にできるでしょうか。

s8_chu

2017/04/09 12:03

質問者さんの実現したいことをもう少し詳しく追記していただけませんか？

wordx

2017/04/09 12:43

質問内容を修正しました。ご確認お願いします。

wordx

2017/04/09 14:11

スキマのない２段固定ヘッダーを作りたいです。

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

回答1件

ベストアンサー

nav要素の中に、containerを2つ持たせるとご希望の挙動になるのではないでしょうか。

html
1<!DOCTYPE html>
2<!--
3To change this license header, choose License Headers in Project Properties.
4To change this template file, choose Tools | Templates
5and open the template in the editor.
6-->
7<html>
8    <head>
9        <title>bootstrapTest</title>
10        <meta charset="UTF-8">
11        <meta name="viewport" content="width=device-width, initial-scale=1.0">
12        <link href="css/bootstrap.min.css" rel="stylesheet">
13        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
14        <script src="js/bootstrap.min.js"></script>
15    </head>
16    <body>
17        <!-- 1.ナビゲーションバーの設定 -->
18        <nav class="navbar navbar-default">
19            <div class="container">
20                <!-- 2.ヘッダ情報 -->
21                <div class="navbar-header">
22                    <a class="navbar-brand">nav-header</a>
23                </div>
24                <!-- 3.リストの配置 -->
25                <ul class="nav navbar-nav">
26                    <li class="active"><a href="#">active list</a></li>
27                    <li><a href="#">list2</a></li>
28                    <li><a href="#">list3</a></li>
29                </ul>
30                <!-- 4.ボタン -->
31                <button type="button" class="btn btn-default navbar-btn">
32                    <span class="glyphicon glyphicon-envelope"></span>
33                </button>
34            </div>
35            <div class="container">
36                <!-- 2.ヘッダ情報 -->
37                <div class="navbar-header">
38                    <a class="navbar-brand">nav-header</a>
39                </div>
40                <!-- 3.リストの配置 -->
41                <ul class="nav navbar-nav">
42                    <li><a href="#">list1</a></li>
43                    <li class="active"><a href="#">active list</a></li>
44                    <li><a href="#">list3</a></li>
45                </ul>
46                <!-- 4.ボタン -->
47                <button type="button" class="btn btn-default navbar-btn">
48                    <span class="glyphicon glyphicon-envelope"></span>
49                </button>
50            </div>
51        </nav>        
52    </body>
53</html>