Как изменить точку останова для слайд-навигации в Docusaurus

У меня в мой сайт Docusaurus есть только две ссылки заголовка: Docs и GitHub. Я бы хотел, чтобы эти ссылки оставались в заголовке, пока я не уменьшу размер браузера до 500 пикселей. К сожалению, ссылки скользят вниз, как только размер браузера уменьшается до 1024 пикселей. Как я могу предотвратить это?

Я обнаружил, что следующий код отвечает за поведение скользящей навигации:

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

Однако, если я изменю минимальную ширину медиа-запроса на 500 пикселей, макет разорвется с большим разрывом под строкой заголовка:

Как изменить точку останова для слайд-навигации в Docusaurus

Как правильно изменить эту точку останова?


2
262
1

Ответ:

Решено

Небольшие изменения: 1. Измените медиа-запрос для класса .navigationSlider на 500 пикселей. 2. Для дополнительного промежутка после заголовка удалите padding-top: от 100px до 50px из .navPusher (для этого вам нужно добавить еще один медиа-запрос)