Bootstrap 4 で navbar を固定ヘッダーとして設定する方法をご紹介します。

背景 ヘッダーを固定したい

本記事では Bootstrap 4 にて navbar を固定ヘッダーとして配置するサンプルコードをご紹介します。

完成形は以下のような感じです。

? https://codenote-net.github.io/sandbox/bootstrap4/header_sticky-top_navbar.html

逆に navbar が固定ヘッダーになっていない例は、以下のとおりです。。

? https://codenote-net.github.io/sandbox/bootstrap4/no_header_sticky-top_navbar.html

Bootstrap 4 で navbar を固定ヘッダーとして設定する サンプルコード

<header class="sticky-top">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand " href="/">Navbar</a>
        </div>
    </nav>
</header>

サンプルコードは以下の GitHub Pull Request に公開していますので、ぜひご覧ください。

? [Bootstrap 4] navbar を固定ヘッダーに設定する サンプルコード · Pull Request #3 · codenote-net/sandbox

以上、Bootstrap 4 で navbar を固定ヘッダーとして設定したい、現場からお送りしました。