Description: Learn how to create a fixed height and non-scrollable top menu and bottom footer using Bootstrap 5 with our step-by-step guide. Elevate your website's design and user experience with this popular layout feature. Our expert tips and examples will help you implement this technique with ease and efficiency.
<html>
<head>
...
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
...
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary bg-dark fixed-top" data-bs-theme="dark">
<div class="container-fluid">
...
</div>
</nav>
<div style="padding-top: 3.5rem;padding-bottom: 2.5rem" class="container">
...
</div>
<nav class="navbar navbar-expand-lg bg-body-tertiary bg-dark fixed-bottom" data-bs-theme="dark">
<div class="container-fluid">
...
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="/js/button.js"></script>
</body>
</html>
Follow the quick-start
css at the head tagjavascript at the bottom of body tag, ensure the javascript is enabled correctly without problem causing for missing item or elementsThe top menu supposed to be on fixed on top and bottom of the page without afecting by scrolling. The container can be achieved by add bootstrap class fixed-top(for bootstrap version before 5, use navbar-fixed-top) or fixed-bottom(for bootstrap version before 5, use navbar-fixed-top)
Since the middle container is covered by the top and / or bottom menu, the container needed to define a padding for preventing overlay with the top and / or bottom menu. e.g.
<div style="padding-top: 3.5rem;padding-bottom: 2.5rem" class="container">
...
</div>