如何在WordPress Twenty-Twenty-Four主题中实现移动端下拉导航菜单

• 检查导航块的移动端设置

  1. 进入WordPress后台，打开外观→站点编辑器
  2. 找到导航菜单所在区块，选中后打开右侧设置面板
  3. 点击编辑器顶部的手机图标切换到移动端视图，在「导航」设置里找到「子菜单行为」，选择「点击展开/收起」（匹配目标效果的交互逻辑）
  4. 确认「移动菜单样式」设置为包含下拉功能的选项，比如「汉堡菜单+下拉」

• 自定义CSS补全样式（默认设置不生效时用）

  1. 进入站点编辑器的「样式」面板（外观→站点编辑器→样式）
  2. 打开「自定义CSS」，添加以下代码：

     /* 移动端子菜单默认隐藏 */
     .wp-block-navigation__submenu-container.is-mobile {
       display: none;
     }
     /* 子菜单展开时显示 */
     .wp-block-navigation__submenu-container.is-mobile.is-open {
       display: block;
       position: static;
       padding-left: 1rem;
     }
     /* 显示移动端下拉箭头 */
     .wp-block-navigation-item__toggle.is-mobile {
       display: inline-block;
       margin-left: 0.5rem;
     }
     

  3. 保存设置后刷新移动端页面查看效果

• 确认菜单结构正确性
  进入后台外观→菜单，再次检查子菜单是否正确嵌套在父菜单下（桌面端正常说明结构没问题，移动端需确保父菜单的「显示子菜单」选项已勾选）

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