I am developing a website with a fixed side navigation bar that stays in place when scrolling through the content section. I experimented with both the fix-position in Bootstrap 5 and CSS methods, but no matter how I set it up, the side bar remains transparent in appearance and causes the content section to collapse and overlap with the side bar.
<body class="container-fluid row">
<div class="navPart col-md-2 col-sm-2 d-none d-sm-block border">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid d-flex flex-column" style="height: 100vh;">
<a class="navbar-brand d-none d-md-block" href="{% url 'seed_list' %} "><strong>projTree</strong></a>
<div class="" id="navbarNav ">
<ul class="navbar-nav d-flex flex-column">
<li class="nav-item">
<a class="nav-link active d-flex" aria-current="page" href="{% url 'seed_list' %} ">
<img src="{% static 'seed/seed_list_icon.svg' %}" alt="alt">
<p class="d-none d-md-block my-auto">Seeds</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'posts' %} ">
<img src="{% static 'seed/posts_icon.svg' %}" alt="">
Posts
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="contentPart col-md-8 col-sm-10 border">
{% block content %}
{% endblock %}
</div>
<div class="infoPart col-md-2 col-sm-0 border">
<div class="search">
<form class="d-flex flex-column row g-2 mt-1" method="POST" action="{% url 'search_seed' %} "> {% csrf_token %}
<input class="form-control" type="search" placeholder="Search" aria-label="Search" name="searched">
<button class="btn btn-outline-secondary" type="submit">Search</button>
</form>
</div>
<div class="message">
{% if messages %}
{% for message in messages %}
<div class="alert">
{{message}}
</div>
{% endfor %}
{% endif %}
</div>
</div>
The HTML code above showcases my efforts. I aspire for my layout to resemble that of the Duolingo website, where the side bar remains fixed and does not shift when scrolling.