Twenty Seventeen子主题更新后主导航仅在移动端显示的排查求助

1. 主主题更新后的CSS差异 #

• 检查主主题更新后新增/修改的桌面端菜单相关CSS规则，比如#site-navigation或.main-navigation在桌面断点（Twenty Seventeen默认是960px以上）的display、visibility属性，确认是否被子主题CSS错误覆盖或未正确继承。
• 用浏览器开发者工具（F12）查看桌面模式下菜单元素的样式，排查是否存在display: none或visibility: hidden的强制规则，区分是主主题新增规则还是子主题CSS冲突导致。

2. 子主题header.php模板差异 #

• 对比主主题更新后的header.php，检查子主题的header文件是否遗漏了主主题新增的菜单相关HTML结构或类名，比如是否缺少桌面菜单容器、触发类，或者wp_nav_menu的调用参数是否与主主题新版本不匹配。
• 确认子主题header中是否保留了主主题的site-navigation容器及正确类名，比如.main-navigation.toggled-on这类控制显示的类是否能在桌面端被正确移除。

3. JavaScript逻辑冲突 #

• Twenty Seventeen的菜单显示依赖内置navigation.js控制，检查子主题是否未正确继承主主题JS文件，或自定义JS覆盖了菜单的显示逻辑。
• 打开浏览器控制台查看是否有JS报错，排查是否存在阻止菜单切换的错误代码，导致桌面端菜单无法正常展开。

4. 子主题函数文件钩子冲突 #

• 检查子主题functions.php中修改菜单的钩子（比如wp_nav_menu_args、nav_menu_css_class），确认主主题更新后这些钩子的参数或逻辑是否不再适配，导致桌面菜单输出异常。
• 确认子主题是否通过wp_enqueue_style正确加载主主题样式，排查更新后样式加载顺序是否异常（比如子主题样式加载在主主题之前，导致无法正确继承或覆盖）。

5. 缓存与浏览器兼容问题 #

• 清除浏览器缓存、服务器缓存（如CDN、缓存插件），排除旧CSS/JS文件导致的显示异常。
• 在不同浏览器（Chrome、Firefox、Edge）的桌面模式下测试，排除浏览器特定的样式兼容问题。

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