Блог

Главная - Вопросы по программированию - Загрузчик ReactJS — Как сложить 2 навигационные панели? И сделать первый статичным, а второй липким сверху

Загрузчик ReactJS — Как сложить 2 навигационные панели? И сделать первый статичным, а второй липким сверху

#reactjs #react-bootstrap

Вопрос:

У меня есть конкретный ответный вопрос. Как создать две составные строки меню вверху страницы:

  1. простой текст
  2. пункты меню — прикреплены к верхней части страницы

Я добавил «mt-5» ко второму, потому что второй перекрывает первый. Теперь проблема в том, что 2 бара остаются фиксированными немного ниже верхней части страницы.

 lt;BsNavbar className="justify-content-center"gt;  lt;NavItem className="align-items-center text-center"gt;  lt;p className="text-muted text-center"gt;static bar textlt;/pgt;  lt;/NavItemgt;  lt;/BsNavbargt;  lt;BsNavbar className="bg-white border-bottom mt-5" fixed="top"gt;  lt;div className="container-fluid"gt;  lt;Link  className="d-flex align-items-center navbar-brand mr-0"  to={loggedIn ? "/dashboard" : "/"}  gt;  lt;ElrondLogo className="elrond-logo" /gt;  lt;span className="dapp-name text-muted"gt;{dAppName}lt;/spangt;  lt;/Linkgt;  lt;Nav className="text-center text-muted"gt;  lt;NavItemgt;  lt;a href="/" className="text-muted"gt;  Menu1  lt;/agt;  lt;/NavItemgt;  lt;/Navgt;  lt;Nav className="text-center"gt;  lt;NavItemgt;  lt;a href="/" className="text-muted"gt;  Menu2  lt;/agt;  lt;/NavItemgt;  lt;/Navgt;  lt;Nav className="text-center"gt;  lt;NavItemgt;  lt;a href="/" className="text-muted"gt;  Menu3  lt;/agt;  lt;/NavItemgt;  lt;/Navgt;  lt;/divgt;  lt;/BsNavbargt;

вот как это должно выглядеть при первой загрузке страницы введите описание изображения здесь

вот как это выглядит, когда прокрутите вниз и введите описание изображения здесь

вот как я хотел бы выглядеть введите описание изображения здесь

Метки: ,