Простая CSS проблема с навигационными ссылками и текстом главной страницы

Question

Может ли кто-нибудь научить меня, как сохранить текст в моем разделе «Обо мне», чтобы он не показывался по моим навигационным ссылкам, если экран слишком маленький (как на мобильном устройстве). Если вы go на моем сайте портфолио, все еще в работе, конечно, вы можете понять, что я имею в виду. https://portfolio-kw.herokuapp.com. Я выложу свой CSS ниже. Я знаю, что обо мне все довольно просто c, но я просто пытаюсь упростить его, пока создаю свое портфолио. Я сделаю это звучит намного лучше позже, лол. Я также хотел поиграть с различными фоновыми анимациями, но мне понравился внешний вид этой простой анимации.

@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

Вот решение с немного обновленной версией вашего кода

@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

это происходит в основном из-за свойства flex-wrap . При уменьшении размера экрана и нехватке места свойство wrap будет переносить ссылки, поэтому лучше установить свойство wrap для nowrap.

 .menu {
display: -webkit-box;
display: flex;
flex-wrap: nowrap;
padding: 0;
margin: 0;
float: right;
text-align: center;
}

Подробнее о flex-wrap .