如何更改 Docusaurus 中 slidingNav 的断点

Question

我在 my Docusaurus site 中只有两个 header 链接：文档和 GitHub。我想让这些链接保留在 header 中，直到我将浏览器缩小到 500 像素。不幸的是，一旦浏览器缩小到 1024 像素，链接就会下滑。我该如何防止这种情况？

我发现 following code 负责滑动导航行为：

@media only screen and (min-width: 1024px) {
  .navigationSlider .slidingNav ul {
    background: none;
    display: flex;
    flex-flow: row nowrap;
    margin: 0;
    padding: 0;
    width: auto;
  }
}

但是，如果我将媒体查询的 min-width 更改为 500px，布局就会中断，header 条下方有一个很大的间隙：

更改此断点的正确方法是什么？

Answer 1

几处变化： 1. 将 .navigationSlider class 的媒体查询更改为 500px。 2. 对于头部移除 padding-top: 100px to 50px from .navPusher 后的额外间隙（为此你需要添加另一个媒体查询）

如何更改 Docusaurus 中 slidingNav 的断点

How to change the breakpoint for slidingNav in Docusaurus

docusaurus