I’m currently working on a simple dashboard where I’m making use of the nested nav of Bootstrap 5.3.1. I notice when I have a lot of content I cannot see the navigation anymore. That’s why I want the left side of the navigation to be sticky so when I scroll down it will always be on screen.
I already tried some things, but that didn’t worked out for me. Here is a example of my current code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test pagina | Wolkie</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<nav class="navbar bg-body-tertiary">
<div class="container">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end position-sticky">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#my-services">My Services</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#domains">Domains</a>
<a class="nav-link ms-3 my-1" href="#hosting">Hosting</a>
<a class="nav-link ms-3 my-1" href="#transfer">Transfer</a>
</nav>
<a class="nav-link" href="#my-profile">My Profile</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#account-details">Account Details</a>
<a class="nav-link ms-3 my-1" href="#change-password">Change Password</a>
<a class="nav-link ms-3 my-1" href="#newsletter">Newsletter</a>
</nav>
<a class="nav-link" href="#billing">Billing</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#overview">Overview</a>
<a class="nav-link ms-3 my-1" href="#payment-details">Payment Details</a>
</nav>
<a class="nav-link" href="#status">Status</a>
<a class="nav-link" href="#logout">Logout</a>
</nav>
</nav>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
<div id="my-services">
<h4>My Services</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="domains">
<h5>Domains</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="hosting">
<h5>Hosting</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="transfer">
<h5>Transfer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="my-profile">
<h4>My Profile</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="change-password">
<h5>Change Password</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="newsletter">
<h5>Newsletter</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="billing">
<h4>Billing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="overview">
<h5>Overview</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="payment-details">
<h5>Payment Details</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="status">
<h4>Status</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="logout">
<h4>Logout</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>
2
Answers
Remove
h-100 align-items-stretchand define the sticky positionsticky-topJust play on the col-8 I opened an attribute style and I passed the overflow-y:scroll property then I set the size to 600px so that your two columns have substantially the same size (NB: For a better experience let debug directly on the navigator)!!