移动端导航栏适配问题求助：导航栏过长且覆盖图标

一、修复移动端导航溢出与图标覆盖问题 #

你的核心问题是桌面端网格布局未适配移动端，导致导航栏超出容器、覆盖图标。以下是针对性修改：

1. 调整顶层网格（.bodygrid）的响应式布局 #

原固定3列布局在移动端会强制挤压logo和导航，改成自适应列分配：

.bodygrid{
  display: grid;
  /* 桌面端：logo占1列，导航占2列 */
  grid-template-columns: 1fr 2fr;
  background-color: white;
  width: 90%;
  align-items: center; /* 垂直居中对齐logo与导航 */
  margin-left: auto;
  margin-right: auto;
  gap: 1em; /* 增加间距避免覆盖 */
}

/* 移动端断点（768px以下）改成单列布局 */
@media (max-width: 768px) {
  .bodygrid{
    grid-template-columns: 1fr;
    text-align: center;
  }
}

2. 修复导航容器（.nested1）的溢出问题 #

原white-space: nowrap和固定5列会导致小屏横向滚动，修改为自适应布局：

.nested1{
  display: grid;
  background-color: white;
  /* 移除强制不换行 */
  /* white-space: nowrap; */
  /* 桌面端5列，自动适配最小宽度 */
  grid-template-columns: repeat(5, minmax(80px, 1fr));
  /* 修正网格列范围，避免超出父容器 */
  grid-column: 2 / -1;
  gap: 0.5em; /* 缩小间距适配小屏 */
  align-content: center;
  padding: 0.5em;
  width: 100%; /* 确保不溢出父容器 */
}

/* 移动端导航自动适配列数 */
@media (max-width: 768px) {
  .nested1{
    grid-column: 1 / -1; /* 占满整行 */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.3em;
  }
}

3. 优化logo容器（.banimg）样式 #

确保logo自适应容器宽度，避免挤压：

.banimg{
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

.banimg img{
  max-width: 100%; /* 图片自适应容器 */
  height: auto; /* 保持比例 */
}

二、解决cpanel中grid-column属性提示未知的问题 #

这是cpanel内置代码检查工具的兼容性误报，CSS Grid是标准属性，主流浏览器均原生支持，可直接忽略该提示。若要消除警告，确认grid-column语法正确即可（比如grid-column: 2 / -1这种现代写法），无需添加浏览器前缀。

三、优化交互样式（可选） #

把内联悬停逻辑移到CSS中，更易维护：

.nested1 > div{
  border: hsl(0, 0%, 6%) 1px solid;
  background-color: white;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: large;
  padding: 0.8em 0.5em; /* 调整内边距适配小屏 */
  transition: all 0.3s ease; /* 添加上过渡动画 */
  text-align: center;
}

.nested1 > div:hover{
  color: white;
}
.nested1 > div:nth-child(1):hover{ background: #093145; }
.nested1 > div:nth-child(2):hover{ background: #107896; }
.nested1 > div:nth-child(3):hover{ background: #829356; }
.nested1 > div:nth-child(4):hover{ background: #bca136; }
.nested1 > div:nth-child(5):hover{ background: #9a2617; }

/* 确保导航链接继承父元素样式 */
.nested1 > div a{
  color: inherit;
  text-decoration: none;
  display: block;
}

内容的提问来源于stack exchange，提问作者HowdyDudey