This is my first post so apologies if I did not follow the correct procedures.
I have been searching via the web through the various resources but cannot find a solution to this problem. Maybe it is past the scope of this project. I am trying to make the header and nav bar of my page mobile friendly but I cannot seem to figure it out.
Without going to crazy you could make the following changes to the nav ul element,
nav > ul {
/* Make width 100% of its container */
width: 100%;
display: flex;
/* Make the flex container wrap when its exceeding its width */
flex-wrap: wrap;
/* Dont need this line of code below, flex is auto set to row unless you change it to column */
flex-direction: row;
justify content: space-between;
list-style-type: none;
}
Thank you for the answer. This is helpful and I learned a few other tricks along the way from this response as well. I think I still need some work to get what I want but this definitely solves the answer to my question.