reactjs - ReactJS bootstrap - 如何堆叠 2 个导航栏？并使第一个静态和第二个粘在顶部

Question

我有一个特定的 React 问题。如何在页面顶部创建两个堆叠的菜单栏：

1. 简单的文字
2. 菜单项 - 粘在页面顶部

我在第二个中添加了“mt-5”，因为第二个与第一个重叠。现在的问题是 2 bar 保持固定在页面顶部下方。

 <BsNavbar className="justify-content-center">
    <NavItem className="align-items-center text-center">
      <p className="text-muted text-center">static bar text</p>
    </NavItem>
  </BsNavbar>
  <BsNavbar className="bg-white border-bottom mt-5" fixed="top">
    <div className="container-fluid">
      <Link
        className="d-flex align-items-center navbar-brand mr-0"
        to={loggedIn ? "/dashboard" : "/"}
      >
        <ElrondLogo className="elrond-logo" />
        <span className="dapp-name text-muted">{dAppName}</span>
      </Link>
      <Nav className="text-center text-muted">
        <NavItem>
          <a href="/" className="text-muted">
            Menu1
          </a>
        </NavItem>
      </Nav>
      <Nav className="text-center">
        <NavItem>
          <a href="/" className="text-muted">
            Menu2
          </a>
        </NavItem>
      </Nav>
      <Nav className="text-center">
        <NavItem>
          <a href="/" className="text-muted">
            Menu3
          </a>
        </NavItem>
      </Nav>
    </div>
  </BsNavbar>

这是第一次加载页面时的外观 在此处输入图像描述

这是向下滚动时的外观 在 此处输入图像描述

这就是我想要的样子 在此处输入图像描述

标签： reactjsreact-bootstrap