建站编辑器中有很多顶部导航都是获取的官网后台设置好的导航组件，无法直接可视化修改导航元素，需要通过代码进行修改，本次，将做一个合集，用于教大家如何去修改。

如上图所示的样式为本次需要修改的内容，下面是针对上述样式修改顶部导航字体样式的详细指南，涵盖各级标题的字体、字号、间距等参数调整方法：

首先进入网站编辑器中：

选中导航模块，点击【编辑代码】，如下图所示：

然后根据自己想要的效果修改对应的地方：

一、字体设置

1. 1. 全局字体修改
   若要统一所有导航文字的字体，可在:root中添加字体变量：

   :root{
     /* 新增字体变量 */
     --nav-font-family: 'Arial', sans-serif;
     --nav-font-weight: 400; /* 正常字重 */
   }

2. 2. 一级导航字体
   在.outer-column20230726 .navigation20230726 >li >a选择器中修改：

   .outer-column20230726 .navigation20230726 >li >a {
     font-family: var(--nav-font-family); /* 使用变量 */
     font-size: 18px; /* 一级导航字号 */
     font-weight: 600; /* 加粗 */
   }

3. 3. 二级导航字体
   找到二级菜单样式修改：

   .outer-column20230726 .navigation20230726 >li >ul >li >a {
     font-size: 16px; /* 二级导航字号 */
     font-family: var(--nav-font-family);
     font-weight: 500;
   }

4. 4. 三级导航字体
   调整三级菜单样式：

   .outer-column20230726 .navigation20230726 >li >ul >li >ul >li >a {
     font-size: 14px; /* 三级导航字号 */
     font-family: var(--nav-font-family);
   }

二、间距调整

1. 1. 菜单项间距
   调整一级菜单项之间的距离：

   .outer-column20230726 .navigation20230726 >li {
     padding: 5px 30px 20px 20px; /* 左右内边距控制间距 */
     margin: 0 5px; /* 菜单项之间的外边距 */
   }

2. 2. 文字行高
   调整行高使文字垂直居中：

   .outer-column20230726 .navigation20230726 >li >a {
     line-height: 36px; /* 与导航高度匹配 */
   }

3. 3. 子菜单间距
   调整二级菜单内部间距：

   .outer-column20230726 .navigation20230726 >li >ul >li {
     padding: 0px 20px; /* 左右内边距 */
   }
   
   .outer-column20230726 .navigation20230726 >li >ul >li >a {
     padding: 10px 0px; /* 上下内边距 */
   }

三、移动端导航调整

1. 1. 移动端字体

   .mobile-menu20230708 .navigation20230708 li>a {
     font-size: 16px; /* 移动端一级菜单 */
     font-family: var(--nav-font-family);
   }
   
   .mobile-menu20230708 .navigation20230708 li ul li>a {
     font-size: 14px; /* 移动端子菜单 */
     padding-left: 20px; /* 子菜单缩进 */
   }

2. 2. 移动端间距

   .mobile-menu20230708 .navigation20230708 li>a {
     padding: 12px 10px; /* 移动端菜单项内边距 */
   }

四、特殊样式调整

1. 1. 当前选中项

   .outer-column20230726 .navigation20230726 li >a.current {
     font-weight: 700; /* 选中项加粗 */
     letter-spacing: 0.5px; /* 字母间距 */
   }

2. 2. 悬停效果

   .outer-column20230726 .navigation20230726 >li a:hover {
     letter-spacing: 0.8px; /* 悬停时字母间距变化 */
     transition: letter-spacing 0.3s ease;
   }

五、修改建议

• • 字号建议：一级导航16-18px，二级14-16px，三级12-14px
• • 字体选择：建议使用无衬线字体如Arial、Helvetica或系统默认字体栈
• • 响应式调整：在媒体查询中针对不同屏幕尺寸设置不同字体大小
• • 保持一致性：各级菜单的字体风格保持统一，只通过字号和字重区分层级

不同站点使用的模板/组件不同，修改方式有差异，如果您无法自行修改，请联系您的专属客服协助。修改时建议逐步调整并实时预览效果，确保在不同屏幕尺寸下都能保持良好的可读性和美观性。