如何在Divi主题中设置带3px边框的导航栏CTA按钮及菜单布局？

一、实现Logo居左、菜单居中、右侧CTA按钮的头部布局 #

1. 进入WordPress后台，打开 Divi → Theme Customizer，找到 Header & Navigation → Primary Menu Bar。
2. 将「Menu Layout」设置为 Centered Logo，Logo会自动居左，主菜单默认居中显示。
3. 打开 Appearance → Menus 编辑主菜单：
   • 点击「Custom Links」，URL栏填目标跳转链接（或临时填#），链接文本输入NEED ANY SOLUTION，添加到菜单。
   • 点击右上角「Screen Options」，勾选「CSS Classes」，在该自定义菜单项的「CSS Classes」框中填写nav-cta-button。

二、给导航栏CTA按钮添加3px边框 #

在Divi定制器的 General → Custom CSS 中添加以下代码：

/* 导航CTA按钮3px边框样式 */
.nav-cta-button a {
  border: 3px solid #000000; /* 替换为你需要的颜色代码 */
  padding: 8px 16px !important; /* 调整内边距适配按钮尺寸 */
  margin-left: 20px; /* 和左侧菜单拉开间距 */
  border-radius: 0; /* 可选：如需圆角可设置具体数值，比如4px */
}

/* 鼠标悬停效果（可选） */
.nav-cta-button a:hover {
  background-color: #f0f0f0;
  color: #333333;
}

三、用3px边框分隔导航菜单项 #

同样在Custom CSS中添加以下代码：

/* 导航菜单项3px边框分隔 */
#top-menu > li:not(:last-child) {
  border-right: 3px solid #000000; /* 替换为匹配的颜色代码 */
  padding-right: 15px; /* 边框与文字的间距 */
  margin-right: 15px; /* 菜单项之间的额外间距 */
}

/* 排除右侧CTA按钮的边框 */
#top-menu > li.nav-cta-button {
  border-right: none !important;
  padding-right: 0;
  margin-right: 0;
}

注意事项 #

• 颜色代码可替换为Divi全局颜色变量，比如var(--e-global-color-primary)，保持主题风格统一。
• 可根据实际布局调整margin、padding数值，适配你的导航栏尺寸。
• 修改完成后点击定制器右上角「Publish」保存设置。

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