CODEWITHSUNDEEP
reactjsnavbarreact-bootstraphamburger-menu
Kid
Kid

Reputation: 2205

How can I make the react-bootstrap Navbar stay fixed="top" and have sidebar under it

I learn ReactJs and the react-bootstrap NavBar. I wanted to have a fixed="top" NavBar so it is always visible. So the content is scrolled under it!

The two problems i have here in my CodeSanbox is that the side-bare that the NavBar menu opens is under the NavBar.
I think I know why it's because of the fixed="top" property on the NavBar. I have tried to understand how it works and it looks like I have to calculate the NavBar height and set that as top margin for the side-bare. Any better idea or if I'm wrong here please advice?

My other problem is the size of the 3-strip icon Hamburger menu. How can I change it to be bigger? I read the docs and I see no information for this?

Upvotes: 0

Views: 713

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14201

For the .side-drawer, you can adjust the top property (e.g., top: 146px) or you can add some padding to the sidebar element so that it makes space for the header.

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

As for the hamburger button dimensions, I recommend resizing .navbar-toggler-icon

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

Edit Greta100 React.Bootsrap Navbar 1 (forked)

Upvotes: 1

Related Questions