Search code examples
reactjsbootstrap-4carouselz-indexreactstrap

React.js -- Bootstrap / Reactstrap -- z-index does not work on Carousel

I want my fixed navbar that stays on the top of the page to display over everything as I scroll down through the page, but when I scroll down the Carousel ends up on top of the navbar.

I have tried to give a z-index: 0 with an !important tag to the carousel, and z-index: 1 to the nav bar but that didn't do the trick. There is a photo attached to show the problem I am talking about.

I want the navbar to display on top of the carousel

Solution

  • give the zindex of fixed navbar some higher value like z-index: 1090

    I wrap the Navbar in a sticky div:-

    <div className="sticky-top" style={{ zIndex: 1090 }}>
    <Navbar></Navbar>
</div>

    BTW I use react-bootstrap.