How to change the breakpoint for slidingNav in Docusaurus

Question

I have just two header links in my Docusaurus site: Docs & GitHub. I would like to have these links remain in the header until I shrink the browser down to 500px. Unfortunately, the links slide down as soon as the browser shrinks to 1024px. How can I prevent this?

I found the following code responsible for the sliding nav behavior:

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

However, if I change the min-width of the media query to 500px, the layout breaks with a big gap below the header bar:

What's the correct way to change this breakpoin?

Answer 1

Few changes: 1. Change media query for .navigationSlider class to 500px. 2. For the extra gap after header remove padding-top: 100px to 50px from .navPusher (For this you need to add another media query)