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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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.
I have removed sticky-top from container-fluid. I also removed flex-nowrap from row. I added the following in the sidebar to make it fixed and scrollable in any screen size: position-fixed top-0 bottom-0 start-0 overflow-auto.
I added ms-auto in the main body container. I also updated the col widths in different screen sizes, but your current code is unsuitable for mobile view. So please adjust your sidebar for mobile view as well.
I have solved your current problem. Check out the following 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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
/>
</head>
<body>
<div class="container-fluid" style="background-color: rgb(255, 255, 255)">
<!--rgb(52, 52, 52)-->
<div class="row">
<!-- Start Navbar -->
<div class="col-sm-4 col-md-3 col-xl-2 px-sm-2 px-0 bg-dark position-fixed top-0 bottom-0 start-0 overflow-auto">
<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-sm-8 col-md-9 col-xl-10 py-3 ms-auto">
<main class="main">{% block content %} {% endblock %}</main>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body>
</html>