带有导航链接和主页文本的简单CSS问题

有人能教我如何在屏幕太小的情况下（比如在手机上），保持“关于我”部分的文字不被导航链接覆盖吗。如果你去我的公文包网站，当然还在工作中，你会明白我的意思。我将在下面发布我的CSS。我知道关于我的东西是非常基本的，但我只是在开发我的投资组合时尽量保持简单。我以后会让它听起来更好，哈哈。我也想玩不同的背景动画，但喜欢这个简单动画的外观开始

@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;
}

---

这主要是由于flex wrap的属性造成的。随着屏幕大小的减小和空间不足，wrap属性将包装链接，因此最好将wrap属性设置为nowrap

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

更多关于

---

这是一个解决方案，其中包含了代码的更新版本

@导入url（“https://fonts.googleapis.com/css?family=Muli:300|斯巴达：300400600&display=swap”）；
* {
框大小：边框框；
}
身体，
html{
身高：100%；
保证金：0；
填充：0；
背景：线性梯度（向左，#eb6134，#f2873f）；
宽度：100%；
高度：100vh；
位置：绝对位置；
}
A.aboutnav{
高度：55px；
背景：透明；
}
.菜单{
显示器：flex；
柔性包装：包装；
填充：0；
保证金：0；
浮动：对；
文本对齐：居中；
}
李先生{
列表样式类型：无；
左侧填充：20px；
右边填充：20px；
填充顶部：12px；
}
.菜单李a{
颜色：白色；
文字装饰：无；
浮动：对；
字体系列：“Muli”，衬线；
字体大小：24px；
显示：块；
右边距：15px；
}
.菜单a:悬停{
背景色：白色；
颜色：黑色；
过渡：0.3s；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.菜单{
证明内容：中心；
宽度：100%；
}
李先生{
填充：5px0px；
}
.菜单李a{
字体大小：20px；
}
.动画区文本{
位置：绝对位置；
顶部：0！重要；
左：0！重要；
转变：无！重要；
颜色：白色！重要；
填充：10%！重要；
}
}
.关于动画区{
}
.盒子区域{
位置：固定；
宽度：100%；
身高：100%；
}
.箱体面积ul{
前50名；
左:50 ;；
宽度：100%；
身高：100%；
溢出：隐藏；
保证金：0；
填充：0；
}
.李箱区{
位置：绝对位置；
显示：块；
列表样式：无；
宽度：25px；
高度：25px；
背景：rgba（255，255，255，0.2）；
动画：动画30秒线性无限；
}
.box区域li：第n个子项（1）{
左：86%；
宽度：80px；
高度：80px；
动画延迟：0s；
}
.box区域li：第n个孩子（2）{
左：12%；
宽度：30px；
高度：30px；
动画延迟：1.5s；
动画持续时间：10秒；
}
.box区域li：第n个孩子（3）{
左：70%；
宽度：100px；
高度：100px；
动画延迟：5.5s；
}
.box区域li：第n个孩子（4）{
左：55%；
宽度：300px；
高度：3000px；
动画延迟：0s；
动画持续时间：15秒；
}
.box区域li：第n个孩子（5）{
左：65%；
宽度：40px；
高度：40px；
动画延迟：0s；
动画持续时间：9.8秒；
}
.盒子区域li：第n个孩子（6）{
左：15%；
宽度：110px；
高度：110px；
动画延迟：3.5s；
}
.box区域li：第n个孩子（7）{
左：38%；
宽度：45px；
高度：110px；
动画延迟：4s；
动画持续时间：10秒；
}
.箱区李：第n个孩子（8）{
左：50%；
宽度：95px；
高度：65px；
动画延迟：2s；
动画持续时间：5s；
}
.box区域li：第n个孩子（9）{
左：28%；
宽度：45px；
高度：105px；
动画延迟：0.5s；
动画持续时间：12秒；
}
.盒子区域li：第n个孩子（10）{
左：19%；
宽度：100px；
高度：135px；
动画延迟：0s；
动画持续时间：7秒；
}
@关键帧设置动画{
0% {
变换：平移（0）旋转（0度）；
不透明度：1；
}
100% {
变换：translateY（-800px）旋转（360度）；
不透明度：0；
}
}
.动画区文本{
字体系列：“Muli”；
字体大小：正常；
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：白色；
}

凯尔·威廉姆森








关于我
你好。我叫凯尔，是一名网络开发人员。
我于2020年2月10日毕业于丹佛大学的编码营。
并收到了我的证书。本课程的主要主题是Ruby语言和
RubyonRails。在整个课程中，我被带着参观了多个小建筑
当然，使用Rails以及HTML和CSS的web应用程序。最后是一些Javascript
和Jquery。我现在的重点是继续提高我作为Web开发人员的技能，并学习更多
在不断发展的编程世界中。
目前正在继续获取前端JavaScript方面的知识。然后我计划学习
Node.js以及React

你能在手机屏幕上删除绝对值和翻译值吗？否则使用FullPageJS如何删除它们？在@media屏幕选择器中？如果是这样，我会将位置更改为什么，并将“变换”设置为“无”？这就是你说的翻译吗？我刚从编码训练营毕业，它主要专注于后端RubyonRails的东西。几乎不涉及CSS。我自己已经学到了很多，但我仍然需要学习很多。因此，当我在这里运行代码片段时，链接和关于我的文本保持分开，但当我在本地运行它时，它仍然存在相同的问题。在这里运行它以及localhosst，这些框从导航栏中出现。我希望他们还是从底部上来。我不知道在你的代码更新中会发生什么变化。你为什么不通过任何免费的工具比如代码来共享代码呢