WordPress Avada主题如何实现主菜单全屏幕尺寸下固定左对齐

失效原因 #

原有代码使用百分比值的margin-right控制位置，该值会跟随父容器宽度动态变化，因此无法在全屏幕尺寸下保持固定的左侧间距。同时Avada主题默认通过flex布局的margin-left: auto属性将主菜单推至右侧，原有代码未覆盖该默认属性，也是失效的核心原因。

正确CSS代码 #

/* 覆盖Avada默认主菜单右对齐规则 */
.fusion-header .fusion-main-menu {
    margin-left: 20px !important; /* 调整此处数值修改固定左侧间距，使用px单位保证尺寸固定 */
    margin-right: auto !important;
    text-align: left;
    margin-top: 4px;
    position: static;
}

/* 移动端适配（不需要可删除） */
@media only screen and (max-width: 800px) {
    .fusion-header .fusion-main-menu {
        margin-left: 15px !important; /* 移动端可单独设置更小的左侧间距 */
    }
}

操作说明 #

• !important用于提升样式优先级，覆盖主题默认规则，若添加代码后直接生效可删除该字段
• 修改后需清空Avada主题缓存、浏览器缓存后再刷新验证效果
• 如果需要调整菜单和logo的间距，只需要修改margin-left对应的数值即可

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