如何将Docusaurus导航栏设置为透明状态

要实现导航栏透明效果，直接通过自定义CSS覆盖默认样式即可，步骤如下：

• 找到或创建项目中的自定义CSS文件：路径一般为src/css/custom.css，这是Docusaurus推荐的自定义样式入口。
• 添加以下CSS代码，覆盖导航栏的背景色和阴影：

  /* 基础导航栏透明设置 */
  .navbar {
    background-color: transparent;
    box-shadow: none;
  }
  
  /* 固定顶部的导航栏（滚动时）也保持透明 */
  .navbar.navbar--fixed-top {
    background-color: transparent;
  }
  

  注：如果默认样式优先级更高，可在属性后加!important强制覆盖，比如background-color: transparent !important;

• （可选）若导航栏透明后遮挡了页面顶部内容，可调整主内容区的边距：

  .main-wrapper {
    margin-top: -70px; /* 数值根据你的导航栏高度调整 */
    padding-top: 70px;
  }
  

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