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 -->
(ブログヘッダーは入れてないのであしからず)
0 comments:
コメントを投稿
スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。
注: コメントを投稿できるのは、このブログのメンバーだけです。