Core Code
Core Code Modern Dev Handbook

Sticky Navbar

Keep the navbar fixed at the top using sticky-top.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<nav class="navbar navbar-dark bg-primary sticky-top">

<div class="container">

<a class="navbar-brand" href="#">Sticky Navbar</a>

</div>

</nav>

<div class="container py-5">

<p>Scroll down to see the sticky navbar stay at the top.</p>

<div style="height:1200px"></div>

</div>

</body>
</html>

More BS5 Navbar Examples (7)

example Basic Navbar open example example Responsive Navbar open example example Dark Navbar open example example Centered Navbar open example example Navbar Brand with Logo open example example Navbar Dropdown open example example Navbar with Search open example