Docusaurus如何配置全尺寸显示汉堡菜单及大屏侧边栏

直接按以下步骤修改配置和样式即可满足全部需求：

• 第一步：实现全尺寸屏幕下导航栏常驻汉堡菜单
  打开全局样式文件src/css/custom.css，加入以下样式覆盖默认逻辑。默认规则下屏幕宽度超过996px时汉堡按钮会被强制隐藏，直接覆写显示规则即可：

  .navbar__toggle {
    display: flex !important;
  }
  

• 第二步：实现大屏（宽度≥996px）下侧边栏正常显示
  同样在custom.css中加入媒体查询样式，避免强制显示汉堡按钮后侧边栏被默认逻辑隐藏，同时保留主内容区的预留边距防止内容被遮挡：

  @media (min-width: 996px) {
    /* 保持侧边栏常驻 */
    .main-wrapper .docSidebarContainer {
      display: block !important;
    }
    /* 主内容区保留侧边栏宽度的左内边距 */
    .docMainContainer {
      padding-left: var(--doc-sidebar-width);
    }
  }
  

  注意：不同Docusaurus版本的组件类名可能带随机哈希后缀（比如docSidebarContainer_xxxx），直接打开浏览器开发者工具抓取对应元素的实际类名替换即可。

• 第三步：适配自定义React落地页
  首先给你的落地页根节点加专属类名，比如在src/pages/index.js（也就是你的落地页组件）最外层标签加上landing-page类：

  export default function LandingPage() {
    return (
      <div className="landing-page">
        {/* 原有落地页业务代码 */}
      </div>
    )
  }
  

  再补充对应样式，在大屏下隐藏落地页的侧边栏，同时保留导航栏的汉堡按钮，并且把主内容区的预留边距去掉让内容撑满宽度：

  @media (min-width: 996px) {
    /* 落地页隐藏侧边栏 */
    .main-wrapper:has(.landing-page) .docSidebarContainer {
      display: none !important;
    }
    /* 清除落地页主内容区的左内边距 */
    .main-wrapper:has(.landing-page) .docMainContainer {
      padding-left: 0 !important;
    }
    /* 落地页保持汉堡按钮常驻 */
    .main-wrapper:has(.landing-page) .navbar__toggle {
      display: flex !important;
    }
  }
  

修改完成后重启本地开发服务即可生效：小屏下逻辑和默认一致，点击汉堡弹出侧边栏抽屉；大屏下所有文档页同时显示汉堡按钮和常驻侧边栏，落地页只显示汉堡按钮不显示侧边栏，完全匹配需求。

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