My vertical nav bar for the about page mostly has a similar format as the nav bar I made for the site, but I made sure the flex-direction is a column and I also added a border-bottom for decoration when it hovers. The whole code looks something like this:
/*decorative box*/
.about-section-body {
display: flex;
flex-direction: column;
align-self: center;
background-color: #1D0000;
border: 2px solid #EF0000;
border-radius: 2px;
padding: 0px 0px 0px 10px;
margin: 20px auto 0px auto; /* Format: Top, right, bottom, left */
width: 90%;
height: auto; /*height is adjusted based on content*/
max-width: 100%;
box-shadow:0 0 15px rgba(251, 0, 0, 0.5); /*Format: X, Y, glow amount, color */
}
.about-nav
{
list-style: none; /* Remove bullet points */
display: flex;
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
width: 95%;
margin-bottom: 5px;
}
.about-nav li {
display: block;
width: 100%;
padding: 10px 0px 10px;
text-align: left;
}
.about-nav ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
color: #F0F0F0;
}
.about-nav li:hover {
cursor: pointer;
border-bottom: 2px solid #EF0000;
color: #EF0000;
}
I also realized that I had to create separate classes for each of these decorative headers I was making because of the certain dimensions I wanted for some of them, so it was hard to make a generic class. Annoying, but this is something I'll need to reflect on in the future so that I can make this easier to implement.