I've been experimenting with positioning three navigation links at the bottom of a sidebar I created, but I'm having trouble getting them there. Despite my attempts, I can't seem to figure out how to make it work.
The background of the nav links I am trying to position at the bottom are green.
Apologies if this description is unclear, I am relatively new to coding in general.
Here's the HTML code:
<div class="container-fluid">
<div class="row">
<div class="col-1 bg-dark position-fixed" id="sticky-sidebar">
<div
class="nav flex-column flex-nowrap vh-100 overflow-auto text-white p2"
id="pink-sidebar"
>
<a href="./index.html" class="nav-link"
><svg
xmlns="http://www.w3.org/2000/svg"
height="2rem"
fill="#A0C3D2"
class="bi bi-house"
viewBox="0 0 16 16"
>
<path
d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"
/>
</svg>
</a>
<a href="#" class="nav-link bottom">Gallery</a>
<a href="#" class="nav-link bottom">About</a>
<a href="#" class="nav-link bottom">Contact</a>
</div>
</div>
CSS code:
#sticky-sidebar {
padding-left: 0;
padding-right: 0;
}
#pink-sidebar {
background-color: #eac7c7;
align-items: center;
padding: 1rem;
display: flex;
}
.nav-link {
padding: 0.5rem;
color: #a0c3d2;
--bs-nav-link-hover-color: #EAE0DA;
}
.bottom {
background-color: green;
}
/* #main {
} */
I have tried various methods such as setting the sticky-sidebar to display:flex and setting the alignment of the .bottom nav-links to flex-end. I also tried using flex-direction: column-reverse;
I expected the divs containing the links with a green background to appear at the bottom of the sidebar, since I declared it as a flex-column. I might be confusing Bootstrap annotations with regular CSS annotations, but this should be an easy fix and I find it frustrating not being able to resolve it.