Having issues trying to make fixed navigation bar mobile responsive - html

Question

i'm working on FCC Technical Documentation Page and i'm having an issue, i'm trying to make this project mobile responsive, but i'm running into an issue where I can't seem to figure out how to move my left fixed nav bar and transition it to a top nav bar that is center aligned at anything below 920px, if you can be of any help I would appreciate it. I will link the project below so anyone can look at the code.
EDIT Finished making the project mobile responsive, might not be the most efficient method but it worked as i'm learning, click the link to view the code to see what I did that worked.
https://codepen.io/ochovj/pen/eYvwmYr
#media screen and (max-width: 920px) {
.nav-ul {
position: relative;
top: 0;
margin: 0;
padding: 0;
text-align: center;
float: none;
}
}
/* End of Responsiveness */
/* Nav Bar Container */
#navbar {
position: fixed;
width: 290px;
height: 100%;
top: 0px;
left: 0px;
border: 2px solid black;
background-color: white;
padding: 50px 0;
}

Answer 1

The easiest way would be to make your navbar list display: flex at the desired breakpoint:
#media screen and (max-width: 920px) {
.nav-ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
display: flex alone should do roughly what you want, but flex-wrap: wrap allows multiple rows if your elements don't all fit on a single line and justify-content: center will center the <li> elements inside the <ul> parent.
The list elements will need more styling, like padding, as they'll just be squished in a row together -- but this will quickly fix your position issue.