Examplesからですが
Fixed top navbar example · Bootstrap v5.3
https://getbootstrap.com/docs/5.3/examples/navbar-fixed/
ようやくしっくり行きました
サンプル > https://blogger-template-built-for-bootstrap.blogspot.com/
JetThemeでわざわざ変える人はいないと思いますが
必要に応じて<head>内に追加
<!-- Bootstrap v5.3.2 CSS -->
<link crossorigin='anonymous' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css' integrity='sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN' rel='stylesheet'/>
<!-- Font Awesome v4.7.0 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet' type='text/css'/>
追加CSS
/* Show it is fixed to the top */
body {
padding-top: 4.5rem;
}
</body>上に追加
<!-- Bootstrap Script -->
<!-- JavaScript Bundle with Popper -->
<script crossorigin='anonymous' integrity='sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL' src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js'/>
<!-- //Bootstrap Script -->
Navbar(<body>下に追加)
<!-- Navbar -->
<nav class='navbar navbar-expand-md navbar-dark fixed-top bg-dark'>
<div class='container-fluid'>
<a class='navbar-brand' href='#'>Fixed navbar</a>
<button aria-controls='navbarCollapse' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarCollapse' data-bs-toggle='collapse' type='button'>
<span class='navbar-toggler-icon'/>
</button>
<div class='collapse navbar-collapse' id='navbarCollapse'>
<ul class='navbar-nav me-auto mb-2 mb-md-0'>
<li class='nav-item'>
<a aria-current='page' class='nav-link active' href='#'>Home</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>Link</a>
</li>
<li class='nav-item'>
<a aria-disabled='true' class='nav-link disabled'>Disabled</a>
</li>
</ul>
<form action='/search/max-results=10' class='d-flex' method='get'>
<input aria-label='Search' class='form-control me-2 my-2 my-sm-0' name='q' placeholder='このブログを検索' type='search'/>
<button class='btn btn-primary my-2 my-sm-0' type='submit'><span class='fa fa-search fa-fw'/></button>
</form>
</div>
</div>
</nav>
<!-- //Navbar -->
(ブログヘッダーは入れてないのであしからず)
![★5 島田 愛里寿[8周年]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj65wHOz5Wt1VLQOOxLKUvifM2m4nYB7GfMOD_IuXmhNOQQAU0pxkpnWCHYBwqrbS0k8ruH1pXSLe_kqxJ7i93vNibcvP4Gbmn_ZibTVsF0S9IFdVrWmEXX59XKiCVOATpqoxGCYh7KRsA_hWuDc9POqEoGceBDqly9FsPyaCuXKvLPBh7_nFTIl51MG2m/s1600/2023_10_27_19_39_10_76.jpg)
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/16773fda.3c4383f1.16773fdb.c4cdf45d/?me_id=1191921&item_id=10156829&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fishibashi%2Fcabinet%2Fip897%2F80-431167100-scse_1.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
