I am new to web development and am currently developing a portfolio website based on django and bootstrap 5.3.3 and I have a problem with my sidebar sticking to the top of the page and not the top of the screen of the user (I need it to be visible to the user no matter where they are on the page). I have tried using the bootstrap class sticky-top, but it seems to not make any changes in its behavior. Here is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Portfolio</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div class="container-fluid sticky-top" style="background-color: rgb(255, 255, 255);"> <!--rgb(52, 52, 52)-->
<div class="row flex-nowrap">
<!-- Start Navbar -->
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
<div class="dropdown pb-4">
<a href="#" class="d-flex align-items-center text-white text-decoration-none " id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle">
{% if user.is_authenticated %}
<span class="d-none d-sm-inline mx-1">{{user.username}}</span>
{% else %}
<span class="d-none d-sm-inline mx-1">Aleksandr Gruzdev</span>
{% endif %}
</a>
<!-- <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul> -->
</div>
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
<li class="nav-item">
<a href="/" class="nav-link align-middle px-0">
<span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-house"></i> Home</span>
</a>
</li>
<li>
<a href="/#about" class="nav-link px-0 align-middle mt-1">
<span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-person"></i> About</span></a>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle mt-1">
<span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-images"></i> Resume</span></a>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle mt-1">
<span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-hdd-stack"></i> Services</span></a>
</li>
<li>
<a href="#projects" data-bs-toggle="collapse" class="nav-link px-0 align-middle dropdown-toggle mt-1" style="color: rgb(20, 157, 221);">
<span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-card-list"></i> Projects</span> </a>
<ul class="collapse nav flex-column ms-1" id="projects" data-bs-parent="#menu">
<li class="w-100">
<a href="blogpost" class="nav-link px-0" style="color: rgb(20, 157, 221);"> <span class="d-none d-sm-inline">Blog Post</span> </a>
</li>
<li>
<a href="/lekschat" class="nav-link px-0" style="color: rgb(20, 157, 221);"> <span class="d-none d-sm-inline">LeksChat™</span> </a>
</li>
<li>
<a href="#game" data-bs-toggle="collapse" class="nav-link px-10 align-right dropdown-toggle" style="color: rgb(20, 157, 221);">
<span class="ms-1 d-none d-sm-inline"><i class="bi bi-card-list"></i> Space Runner Game</span> </a>
<ul class="collapse nav flex-column ms-1" id="game" data-bs-parent="#projects">
<li>
<a href="#" class="nav-link px-0" style="color: rgb(20, 157, 221);"> <span class="d-none d-sm-inline">Game</span> </a>
</li>
<li class="w-100">
<a href="#" class="nav-link px-0" style="color: rgb(20, 157, 221);"> <span class="d-none d-sm-inline">Leaderboard</span> </a>
</li>
<li>
<a href="#" class="nav-link px-0" style="color: rgb(20, 157, 221);"> <span class="d-none d-sm-inline">Personal Best</span> </a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle mt-1">
<span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-envelope"></i> Contact</span></a>
</li>
<li>
{% if user.is_authenticated %}
<a href="logout" class="nav-link px-0 align-middle mt-1">
<span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-door-closed"></i> Log out</span></a>
{% if user.is_superuser %}
<a href="http://127.0.0.1:8000/admin/" target="_blank" rel="noopener noreferrer" class="nav-link px-0 align-middle mt-1"><span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-door-closed"></i> Admin Panel</span></a>
{% endif %}
{% else %}
<a href="register" class="nav-link px-0 align-middle mt-1">
<span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-box-arrow-in-right"></i> Login or Signup</span></a>
{% endif %}
</li>
</ul>
<hr>
</div>
</div>
<!-- End navbar -->
<div class="col py-3">
<main class="main">
{% block content %}
{% endblock %}
</main>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
I have found this question already asked in the past, but the solution did not work for me, as well as the person who asked the question: How to set sidebar sticky in Bootstrap 5.2 ChatGPT also did not help. Other websites had confusing answers.