3

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:

enter image description here

What's the correct way to change this breakpoin?

Naresh
  • 23,937
  • 33
  • 132
  • 204

1 Answers1

3

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)

shashaank kumar
  • 46
  • 1
  • 1
    Thanks Shashaank - works like a charm! To be safe I overrode a somewhat larger portion of the navigation slider css for my media query. Here it is for everyone's benefit: https://github.com/nareshbhatia/mobx-state-router/blob/master/website/static/css/custom.css#L45-L115. Live site here: https://nareshbhatia.github.io/mobx-state-router/ – Naresh Dec 19 '18 at 18:30