I need help with my portfolio website. I can't seem to figure out how to make my header and navigation menu stack on top of each other when the page is small, and then go back to their normal layout when the page is larger.
Below is the HTML code I'm using.
<body class="container" id="boostrap-overrides">
<a id="name" href="#">Jasmine Parson</a>
<ul id="list" class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a id="mid" class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
Here is the relevant CSS code.
#boostrap-overrides ul {
flex-wrap: nowrap;
}
.center {
text-align: center;
}
ul {
float:right;
display: inline;
line-height: 15px;
margin: 0 auto;
}
Also, here is the jQuery code I'm using.
$(window).resize(function(){
if($(window).width() <= 700){
$("#list").removeClass("justisfy-content-end");
$("#list").addClass("justisfy-content-center");
}
});