WordPress头部按钮滚动截断及对齐问题求助

一、按钮滚动遮挡与对齐问题修复 #

1. 解决max-height和padding的冲突 #

你当前给.menu-button a设置的max-height:40px和padding:20px 25px存在矛盾——上下内边距加起来已达40px，再加上字体高度，实际元素高度远超40px，会被max-height强制截断，这是滚动时按钮底部被遮挡的核心原因。修改方案二选一：

• 移除max-height:40px，改为min-height:40px（保证按钮最小高度，同时不限制实际高度）
• 调整内边距值，比如改为padding:10px 25px，让整体高度适配头部空间

2. 修复滚动遮挡与搜索框对齐 #

• 检查头部导航容器的overflow属性，若设置为overflow:hidden，改为overflow:visible，避免截断按钮
• 给.menu-button添加垂直对齐样式，解决搜索框对齐问题：

.menu-button {
  vertical-align: middle;
  align-self: center; /* 若头部用flex布局，此属性效果更直接 */
}

• 确保按钮层级不被其他元素覆盖，可添加：

.menu-button a {
  position: relative;
  z-index: 10;
}

二、Divi快速制作头部按钮的方法 #

1. 用Divi内置按钮模块（推荐） #

如果是用Divi Builder自定义头部，直接拖拽Button模块到导航区域，在模块设置面板可视化调整：

• 背景色、文字颜色、字体样式
• 内边距、圆角、hover效果
• 自动适配响应式，无需手动编写CSS

2. 给菜单链接加Divi预设按钮类 #

在「外观-菜单」中添加自定义链接，给该菜单项添加类et_pb_button（Divi自带的按钮样式类），可直接继承Divi默认按钮的所有样式，也能在「主题选项-自定义CSS」中微调样式。

3. 用Divi自定义CSS面板 #

若需要自定义样式，直接在Divi的自定义CSS面板（主题选项→自定义CSS）中编写样式，无需额外添加自定义类，Divi会自动加载样式，避免冲突：

#top-menu .menu-item.my-button a {
  background-color: #FAA723;
  padding: 10px 25px;
  color: #fff!important;
  font-family: 'Saira Extra Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}

内容的提问来源于stack exchange，提问作者Marc López Soler