WordPress/Elementor移动端下拉菜单最后项按钮底部截断问题求助

核心原因分析 #

仅最后一项出现底部截断，大概率是下拉菜单容器底部内边距不足，或容器默认设置了overflow: hidden导致按钮底部被裁切，也可能是Elementor菜单的默认样式导致最后一项的margin被容器隐藏。

具体修复方案 #

方案1：给下拉菜单容器添加底部内边距

定位移动端下拉菜单容器，补充底部内边距并确保不裁切内容：

@media only screen and (max-width: 768px) {
  /* 针对Elementor移动端下拉菜单容器 */
  selector .elementor-nav-menu--dropdown {
    padding-bottom: 15px; /* 可根据按钮高度调整数值 */
    overflow: visible !important;
  }
}

方案2：提升Sign Out按钮样式权重并补充边距

之前添加边距无效可能是样式权重不足，针对性增强移动端按钮的内/外边距：

@media only screen and (max-width: 768px) {
  .signout-link a {
    color: white !important;
    background-color: #ed5e5e !important;
    border-radius: 20px;
    padding: 8px 16px 12px !important; /* 手动指定上下内边距，确保底部空间 */
    margin-bottom: 10px !important; /* 给按钮底部增加额外外边距 */
  }
}

方案3：修复容器溢出设置

若Elementor默认给菜单容器设置了overflow: hidden，强制覆盖该属性：

@media only screen and (max-width: 768px) {
  .elementor-menu-container .elementor-nav-menu {
    overflow: visible !important;
  }
}

排查提示 #

如果上述方案无效，可通过浏览器开发者工具（F12）：

• 检查下拉菜单容器的height、padding-bottom、overflow属性
• 查看Sign Out按钮的盒模型（margin、padding、border），确认是否存在样式被覆盖的情况

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