I’ll introduce how to set up a navbar as a fixed header in Bootstrap 4.

Background: Want to Fix the Header

This article introduces sample code for positioning a navbar as a fixed header in Bootstrap 4.

The completed result looks like this:

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

Conversely, an example where the navbar is not a fixed header is as follows:

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

Sample Code for Setting Up Navbar as Fixed Header in Bootstrap 4

<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>

The sample code is published in the following GitHub Pull Request, so please take a look.

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

That’s all from the Gemba.