Как иметь Navbar в React-bootstrap, который закреплен на вершине, но не на маленьких окнах просмотра? - PullRequest
Новая
       16

Как иметь Navbar в React-bootstrap, который закреплен на вершине, но не на маленьких окнах просмотра?

0 голосов
/ 08 июля 2019

Я новичок в Bootstrap (и реагирую на загрузку), поэтому у меня возникли некоторые проблемы.

Итак, у меня есть прозрачный Navbar прямо сейчас, и с помощью прослушивателя событий настройте его так, чтобы, когда выпрокрутите вниз, появится фон для панели навигации, и панель навигации останется в верхней части экрана при прокрутке вниз.Это работает только тогда, когда у меня есть <Navbar fixed="top">, что нормально, пока я не переключусь на меньший видовой экран, где мой Navbar превращается в меню гамбургеров.Если у меня есть fixed="top" там, когда вы открываете меню гамбургера, оно расширяется за любой текст, который у меня есть на моей странице под ним, вместо того, чтобы нажимать его вниз и освобождать место для ссылок Navbar.

Если яудалите fixed="top" из Navbar, меню гамбургера работает нормально, но затем, когда я прокручиваю вниз, мой Navbar не остается в верхней части страницы.Я включу скриншоты, чтобы продемонстрировать это.

У кого-нибудь есть идеи, как я могу заставить оба работать?Пожалуйста, дайте мне знать, если вам нужно увидеть какой-либо код.

С <Navbar fixed="top"> и расширенным меню гамбургера, «about», «projects» и «experience» встретятся с содержанием ниже: enter image description here

Без <Navbar fixed="top"> работает нормально, но когда я прокручиваю вниз, панель навигации не прилипает к верхней части экрана: enter image description here

1 Ответ

1 голос
/ 09 июля 2019

Я предлагаю использовать css, чтобы установить фиксированную панель навигации. Управляйте фиксированным состоянием с помощью медиазапросов на основе размера целевого экрана.

Вы можете использовать этот CSS в качестве руководства.

.css файл 

@media (min-width: 700px) {
 .my-navbar {
  position: fixed;
 }
}

.html файл 

<navbar class="my-navbar">

Надеюсь, это поможет!

Ура! * * 1013

...