navbar-fixed-top show content behind Navbar

Question

How do you prevent the content from floating behind the Navbar when scrolling?

<Navbar className="navbar-form navbar-fixed-top" responsive collapseable brand='x' inverse toggleNavKey={1} onClick={this.handleMouseDown}>

Or is it in:

<Nav className="navigation"..

Thanks

Answer 1

Add a custom class to your navbar component, say, sticky-nav. Define the following CSS properties on it:

.sticky-nav {
  position: sticky;
  top: 0;
}

This will make your navbar stick to the top and will automatically adjust the height of its following DOM elements. You can read more about the sticky property on MDN.

Answer 2

As Scrotch said adding:

<Navbar style={{backgroundColor: "#071740", position: "sticky"}} variant="dark" fixed="top">

worked for me, I did it inline but putting in a separate CSS file should work as well. This is the only thing that's worked so far for me.

NB: I'm using "react-bootstrap": "^1.0.0-beta.16"