navbar-fixed-top show content behind Navbar

react-bootstrap
Chris G. picture Chris G. · Sep 1, 2015 · Viewed 14.1k times · Source

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

Scrotch picture Scrotch · Jul 4, 2018

I like jmarceli's answer, but here's a simpler approach:

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.

Related questions

How to add a classname/id to React-Bootstrap Component?

Suppose we are using Row from React-Bootstrap... How do we style it without using a wrapper or inner element: <Row> <div className='some-style'> ... </Row> Ideally we could just do: <Row className='some-style> ... &…

Read More
Listen to keypress for document in reactjs

I want to bind to close the active react bootstrap popover on escape press .Here is the code _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", …

Read More
Changing style of a button on click

Is it possible to change background-color of my button onClick function? ex. click background-color: black, another click background-color: white I've tried something like this.style, no result. I've managed to get overlay working and insert needed data inside of it. …

Read More