[Bootstrap 4] navbar を固定ヘッダーに設定する方法
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 を固定ヘッダーとして設定したい、現場からお送りしました。
