Simple CSS issue with nav links and main page text - css

Question

Can someone teach me how to keep the text in my About Me section to not run over my nav links if the screen is too small (like on mobile). If you go to my portfolio site, still in the works of course, you can see what I mean. https://portfolio-kw.herokuapp.com. I'll post my CSS below. I know the about me stuff is pretty basic, but I'm just trying to keep it simple while I develop my portfolio. I'll make it sound much better later lol. I'm also wanting to play with different background animations, but liked the look of this simple animation to start.
#import url("https://fonts.googleapis.com/css?family=Muli:300|Spartan:300,400,600&display=swap");
* {
box-sizing: border-box;
}
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.aboutnav {
height: 55px;
background: transparent;
}
.menu {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
float: right;
text-align: center;
}
.menu li {
list-style-type: none;
padding-left: 20px;
padding-right: 20px;
padding-top: 12px;
}
.menu li a {
color: white;
text-decoration: none;
float: right;
font-family: "Muli", serif;
font-size: 24px;
display: block;
margin-right: 15px;
}
.menu li a:hover {
background-color: white;
color: black;
transition: 0.3s;
}
#media screen and (max-width: 600px) {
.menu {
justify-content: center;
width: 100%;
}
}
.about-animation-area {
background: linear-gradient(to left, #eb6134, #f2873f);
width: 100%;
height: 100vh;
position: relative;
}
.box-area {
position: fixed;
width: 100%;
height: 100%;
}
.box-area ul {
top: 50;
left: 50;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.box-area li {
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.2);
animation: animate 30s linear infinite;
}
.box-area li:nth-child(1) {
left: 86%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.box-area li:nth-child(2) {
left: 12%;
width: 30px;
height: 30px;
animation-delay: 1.5s;
animation-duration: 10s;
}
.box-area li:nth-child(3) {
left: 70%;
width: 100px;
height: 100px;
animation-delay: 5.5s;
}
.box-area li:nth-child(4) {
left: 55%;
width: 300px;
height: 3000px;
animation-delay: 0s;
animation-duration: 15s;
}
.box-area li:nth-child(5) {
left: 65%;
width: 40px;
height: 40px;
animation-delay: 0s;
animation-duration: 9.8s;
}
.box-area li:nth-child(6) {
left: 15%;
width: 110px;
height: 110px;
animation-delay: 3.5s;
}
.box-area li:nth-child(7) {
left: 38%;
width: 45px;
height: 110px;
animation-delay: 4s;
animation-duration: 10s;
}
.box-area li:nth-child(8) {
left: 50%;
width: 95px;
height: 65px;
animation-delay: 2s;
animation-duration: 5s;
}
.box-area li:nth-child(9) {
left: 28%;
width: 45px;
height: 105px;
animation-delay: 0.5s;
animation-duration: 12s;
}
.box-area li:nth-child(10) {
left: 19%;
width: 100px;
height: 135px;
animation-delay: 0s;
animation-duration: 7s;
}
#keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(-800px) rotate(360deg);
opacity: 0;
}
}
.animation-area-text {
font-family: "Muli";
font-weight: normal;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

Answer 1

Here is the solution with a bit updated version of your code
#import url("https://fonts.googleapis.com/css?family=Muli:300|Spartan:300,400,600&display=swap");
* {
box-sizing: border-box;
}
body,
html {
height: 100%;
margin: 0;
padding: 0;
background: linear-gradient(to left, #eb6134, #f2873f);
width: 100%;
height: 100vh;
position: absolute;
}
.aboutnav {
height: 55px;
background: transparent;
}
.menu {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
float: right;
text-align: center;
}
.menu li {
list-style-type: none;
padding-left: 20px;
padding-right: 20px;
padding-top: 12px;
}
.menu li a {
color: white;
text-decoration: none;
float: right;
font-family: "Muli", serif;
font-size: 24px;
display: block;
margin-right: 15px;
}
.menu li a:hover {
background-color: white;
color: black;
transition: 0.3s;
}
#media screen and (max-width: 600px) {
.menu {
justify-content: center;
width: 100%;
}
.menu li {
padding: 5px 0px;
}
.menu li a {
font-size: 20px;
}
.animation-area-text {
position: absolute;
top: 0 !important;
left: 0 !important;
transform: none !important;
color: white !important;
padding: 10% !important;
}
}
.about-animation-area {
}
.box-area {
position: fixed;
width: 100%;
height: 100%;
}
.box-area ul {
top: 50;
left: 50;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.box-area li {
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.2);
animation: animate 30s linear infinite;
}
.box-area li:nth-child(1) {
left: 86%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.box-area li:nth-child(2) {
left: 12%;
width: 30px;
height: 30px;
animation-delay: 1.5s;
animation-duration: 10s;
}
.box-area li:nth-child(3) {
left: 70%;
width: 100px;
height: 100px;
animation-delay: 5.5s;
}
.box-area li:nth-child(4) {
left: 55%;
width: 300px;
height: 3000px;
animation-delay: 0s;
animation-duration: 15s;
}
.box-area li:nth-child(5) {
left: 65%;
width: 40px;
height: 40px;
animation-delay: 0s;
animation-duration: 9.8s;
}
.box-area li:nth-child(6) {
left: 15%;
width: 110px;
height: 110px;
animation-delay: 3.5s;
}
.box-area li:nth-child(7) {
left: 38%;
width: 45px;
height: 110px;
animation-delay: 4s;
animation-duration: 10s;
}
.box-area li:nth-child(8) {
left: 50%;
width: 95px;
height: 65px;
animation-delay: 2s;
animation-duration: 5s;
}
.box-area li:nth-child(9) {
left: 28%;
width: 45px;
height: 105px;
animation-delay: 0.5s;
animation-duration: 12s;
}
.box-area li:nth-child(10) {
left: 19%;
width: 100px;
height: 135px;
animation-delay: 0s;
animation-duration: 7s;
}
#keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(-800px) rotate(360deg);
opacity: 0;
}
}
.animation-area-text {
font-family: "Muli";
font-weight: normal;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
<html>
<head>
<title>Kyle Williamson</title>
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token"
content="ZNcsatemMEgKW5ckpHur1jbYUoFaTvZTH6HJM4P+TXsvY8hrF3p0x+pbC5D/x3drnQs150Or5/Vdf/dqnNcHRA==">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" media="all"
href="/assets/application-c111a4191915f76ef50e14eedf2f8b59b029f6c825026c9959ef938fbf4b36d9.css"
data-turbolinks-track="reload">
<script src="/assets/application-2fe6185b86bcc188be41be2247b8672f5a57c6a539d20a93e86c7e5f54df593d.js"
data-turbolinks-track="reload"></script>
</head>
<body data-gr-c-s-loaded="true">
<div class="about-animation-area">
<div class="aboutnav">
<ul class="menu">
<li>
<a class="nav-link" href="/">Home</a>
</li>
<li>
<a class="nav-link" href="/projects">Portfolio</a>
</li>
<li>
<a class="nav-link" href="/contacts">Contact me</a>
</li>
</ul>
</div>
<div class="animation-area-text">
<h1>About Me</h1>
<p>Hello. My name is Kyle and I'm a Web Developer.
I graduated the University of Denver's Coding Bootcamp on February 10th, 2020
and received my certificate. This course's main subject was the Ruby language and
Ruby on Rails. Throughout the course, I was walked through building multiple small
web applications using Rails along with HTML and CSS of course. Then eventually some Javascript
and Jquery. My focus now is to continue growing my skills as a Web Developer and learn more
in the ever-evolving world of programming.
Currently continuing to gain knowlege in JavaScript for front end. Then I plan to learn
Node.js as well as React.</p>
</div>
</div>
<ul class="box-area">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

Answer 2

it is mainly happening due to the flex-wrap property. As the screen size decreases and there is not enough space, the wrap property will wrap the links, so it's better set the wrap property to nowrap.
.menu {
display: -webkit-box;
display: flex;
flex-wrap: nowrap;
padding: 0;
margin: 0;
float: right;
text-align: center;
}
For more on flex-wrap.