如何使 react-bootstrap Navbar 保持 fixed="top" 并在其下方有侧边栏

Question

我学习 ReactJs 和 react-bootstrap NavBar。我想要一个 fixed="top" NavBar 所以它总是可见的。所以内容在它下面滚动！

我在 CodeSanbox 中遇到的两个问题是 NavBar 菜单打开的侧栏位于 NavBar.
我想我知道为什么是因为 NavBar 上的 fixed="top" 属性。我试图了解它是如何工作的，看起来我必须计算 NavBar 高度并将其设置为侧栏的上边距。有什么更好的主意，或者如果我在这里错了请指教？

我的另一个问题是 3 条图标汉堡包菜单的大小。我怎样才能让它变大？我阅读了 docs，但没有看到相关信息？

Answer 1

对于 .side-drawer，您可以调整 top 属性（例如，top: 146px），或者您可以向侧边栏元素添加一些填充，使其space 为 header.

.side-drawer {
  padding-top: 160px;
}

至于汉堡包按钮的尺寸，我建议调整大小 .navbar-toggler-icon

.navbar-dark .navbar-toggler-icon {
  height: 100px;
  width: 100px;
}