CODEWITHSUNDEEP
htmlcssreactjstwitter-bootstrapnavbar
Emily
Emily

Reputation: 391

How to have a Navbar in React-bootstrap that's fixed to the top, but not on small viewports?

I'm new to Bootstrap (and react-bootstrap) so I'm having some trouble.

So I have a transparent Navbar right now and using an event listener, set it up so that when you scroll down, a background for the Navbar appears and the Navbar stays at the top of your screen as you scroll down. This only works when I have <Navbar fixed="top">, which is fine until I change to a smaller viewport where my Navbar turns into a hamburger menu. If I have fixed="top" in there, when you open the hamburger menu, it expands over whatever text I have on my page below it, instead of pushing it down and making space for the Navbar links.

If I remove fixed="top" from Navbar, the hamburger menu works fine, but then when I scroll down my Navbar doesn't stay at the top of the page. I will include screenshots to demonstrate this.

Does anyone have any ideas for how I can make both work? Please let me know if you need to see any code.

With <Navbar fixed="top"> and the hamburger menu expanded, "about", "projects", and "experience" run into the content below: enter image description here

Without <Navbar fixed="top"> it works fine, but when I scroll down the Navbar doesn't stick to the top of the screen: enter image description here

Upvotes: 0

Views: 1296

Answers (1)

nielcleo
nielcleo

Reputation: 203

I suggest to use css to set the navbar to fixed. Manipulate the fixed status using media queries based on the target screen size.

You may use this css as guide.

.css file

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

.html file

<navbar className="my-navbar">

Hope it will help!

Cheers!

Upvotes: 1

Related Questions