如何通过CSS设置避免Atelier主题左侧滑出菜单挤压页面内容

• 首先排查主题内置配置：进入WordPress后台，打开外观 > 自定义 > 菜单/头部设置页面，找到侧边栏滑出效果选项，Atelier主题默认支持「推动页面」「覆盖页面」两种效果，直接切换为覆盖模式即可解决挤压问题，无需修改代码。
• 排查自定义样式残留：进入外观 > 自定义 > 自定义CSS板块，检查是否有之前修改菜单相关的样式代码，清理冲突的样式规则后验证效果。
• 排查主题核心样式文件：菜单默认样式存放在wp-content/themes/atelier/assets/css/目录下，优先查看header.css、mobile-menu.css两个文件，搜索.offcanvas-left、.mobile-nav、body.open-left-menu这几个选择器的规则，检查是否存在给body、主容器设置transform: translateX(-xxx)或margin-left的属性，这两个是造成页面挤压的核心原因，删除对应属性即可。
• 排查菜单交互JS逻辑：交互代码存放在wp-content/themes/atelier/assets/js/目录下的header.js或mobile.js文件，搜索汉堡按钮的点击事件回调，检查是否有JS在菜单唤起时给页面容器添加位移类名、直接修改位移样式，删除对应操作逻辑即可。
• 排查子主题自定义代码：如果你启用了Atelier子主题，优先检查子主题下的style.css和functions.php，确认是否有自定义的菜单样式或者钩子函数修改了默认交互逻辑。

修改代码前请先备份对应文件，修改完成后清除WordPress缓存、浏览器缓存以及主题自带的静态资源缓存，再刷新页面验证效果。

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