I have been trying to mess around with getting these three nav-links at the bottom of this sidebar I've created. I cannot manage to get them there. I am not really sure what else to try.
I have the background green on the nav links I am trying to begin at the bottom of the sidebar.
Sorry if this is a bad description, I am new to coding in general.
HTML
<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
#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 making the sticky-sidebar display:flex, then having the .bottom nav-links align-self: flex-end; as well as trying flex-direction: column-reverse;
I expected the divs that the links with green background to begin at the bottom of the sidebar div, since it was declared as a flex-column. I'm not sure if I'm confusing bootstrap annotation with regular CSS annotation but this seems like an easy fix and it's frustrating not knowing how to fix it.
Simply add margin-bottom: auto on the home link, which is mb-auto in Bootstrap like this:
<a href="./index.html" class="nav-link mb-auto">
Hence the full code will be:
#sticky-sidebar {
padding-left: 0;
padding-right: 0;
}
#pink-sidebar {
background-color: #eac7c7;
align-items: center;
padding: 1rem;
/* display: flex; Removed because Bootstrap .nav already adds display:flex */
}
.nav-link {
padding: 0.5rem;
color: #a0c3d2;
--bs-nav-link-hover-color: #EAE0DA;
}
.bottom {
/*background-color: green!important;*/
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<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 mb-auto"><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>
</div>
</div>