Elementor模板汉堡菜单仅显示1条横线而非3条，求助修复方案

问题根源 #

你当前的汉堡菜单只显示1条横线的核心原因是：

• HTML结构中汉堡按钮下的三个<span>是嵌套关系，但你写的CSS选择器.mean-container a.meanmenu-reveal span会匹配所有层级的span，嵌套的span会因为父元素高度限制溢出，无法正常显示
• 你给.meanmenu-reveal加的行内样式text-indent: 0px覆盖了原有CSS的文本缩进隐藏逻辑，也可能影响原有样式表现

可用修复方案（任选一种即可生效） #

方案1：调整CSS匹配嵌套span结构，无需修改HTML #

把你现有CSS中.mean-container a.meanmenu-reveal span相关的代码替换为以下内容：

.mean-container a.meanmenu-reveal span {
    display: block;
    background: #fff;
    height: 3px;
    width: 22px;
    position: relative;
}
.mean-container a.meanmenu-reveal span span {
    position: absolute;
    left: 0;
    top: 6px;
    margin: 0;
}
.mean-container a.meanmenu-reveal span span span {
    top: 6px;
}

这个方案直接适配你现有的三层嵌套span结构，分别控制每一层横线的位置，修改后即可显示3条线。

方案2：用box-shadow实现，兼容性更好 #

如果你不想调整嵌套样式，可以直接用box-shadow生成另外两条线，代码如下：

.mean-container a.meanmenu-reveal span {
    display: block;
    background: #fff;
    height: 3px;
    margin-top: 3px;
    position: relative;
    /* 新增下面两行即可 */
    box-shadow: 0 6px 0 #fff, 0 12px 0 #fff;
    margin-top: 6px;
}

你之前试box-shadow没生效大概率是没有给当前span加position:relative或者阴影颜色没设置匹配，该代码可直接生效。

方案3：调整HTML结构为标准同级结构 #

你也可以把现有HTML中汉堡按钮的嵌套span改成三个同级span，和原有CSS逻辑完全匹配：

<a href="#nav" class="meanmenu-reveal" style="right: 0px; left: auto; text-align: center; text-indent: -9999em; font-size: 1px;">
    <span></span>
    <span></span>
    <span></span>
</a>

注意同时把行内样式的text-indent改回-9999em，font-size改回1px，和原有CSS保持一致，不需要修改CSS就能直接显示三条横线。

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