如何修改WordPress Twenty-Twenty-Three主题移动端菜单断点

操作步骤 #

• 打开站点编辑器：进入后台「仪表盘」→「外观」→「编辑器」，定位到包含导航块的模板或模板部件（一般在页眉区域）。
• 添加自定义CSS：点击编辑器右上角的「样式」图标（画笔样式），选择「自定义CSS」，粘贴以下代码（示例将断点设为1024px，可按需调整数值）：

/* 自定义导航块汉堡菜单切换断点 */
@media (max-width: 1023px) {
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }
    .wp-block-navigation__container {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .wp-block-navigation__responsive-container-open {
        display: none !important;
    }
    .wp-block-navigation__container {
        display: flex !important;
    }
    .wp-block-navigation__responsive-container.is-menu-open {
        display: none !important;
    }
}

说明 #

代码通过覆盖默认媒体查询规则，实现屏幕宽度小于1024px时显示汉堡按钮、隐藏完整菜单；宽度大于等于1024px时显示完整菜单、隐藏汉堡按钮。若需调整断点，替换代码中的1023px和1024px为目标数值即可。

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