When scrolling, the goal is to have the menubar stick as the second div with the other divs going under it. However, only the third div, the sliding banner, is overlapping with the sticky menubar while the others are functioning correctly.
Is there anyone who can assist with this issue?
All the divs are located within the React Router.
CSS
.sticky {
width: 100%;
height: 75px;
color: #61dafb;
background-color: blue;
position: sticky;
top: 0;
}
.slider-main {
width: 100%;
height: 500px;
overflow: hidden;
position: relative;
background-image: url(../images/slide_1.jpg);
background-repeat: no-repeat;
background-size: cover;
animation: slide 10s infinite;
}
@keyframes slide {
0% {
background-image: url(../images/slide_1.jpg);
width: auto;
height: 500px;
}
26% {
width: auto;
height: 500px;
background-image: url(../images/slide_2.jpg);
}
67% {
width: auto;
height: 500px;
background-image: url(../images/slide_3.jpg);
}
}
/* Additional CSS code */
1st div
<div>
<div>
PU AMD AM4 Socket for AMD Ryzen/ AMD Ryzen 2nd Generation/Ryzen with Radeon Vega Graphics/Ryzen 1st
Generation/7th Generation A-series/Athlon X4/Athlon Processors Supports CPU up to 8 cores. The maximum memory frequency
</div>
</div>
2nd div
<div className="mycontainer sticky">
<Navbar className=" site-bg " expand="lg">
<Navbar.Brand>
<div>
<img src={logo} alt="logo" width="200" />
</div>
</Navbar.Brand>
<Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
<Navbar.Collapse id="navbar-toggle" bsStyle="tabs" style={{ marginTop: 30 }}>
<Nav className="ml-auto">
<Link className="my-navbar" to="/">Home</Link>
<Link className="my-navbar" to="/about">About</Link>
<Link className="my-navbar" to="/services">Services</Link>
<Link className="my-navbar" to="/contact">Contact</Link>
<Link className="my-navbar" to="/galleries">Galleries</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
3rd div
<div className="slider-main">
<div className="tx-anim-1">
<div>
Decor and Event
</div>
</div>
<div className="tx-anim-2">
<div style={{ paddingTop: 5 }}>
A management Company
</div>
</div>
<div className="tx-anim-3">
<div style={{ paddingTop: 5 }}>
We promise you the best Deal with full Satisfaction.
</div>
</div>
</div>
4th div
<div style={{ paddingTop: 50 }}>
<Route defaultActiveKey="/home" path="/" exact render={() => <HomePage title={this.state.home.title} subTitle={this.state.home.subTitle} text={this.state.home.text} />} className="container-full" />
<Route path="/about" render={() => <AboutPage title={this.state.about.title} subTitle={this.state.about.subTitle} text={this.state.about.text} />} />
<Route path="/services" render={() => <ServicesPage title={this.state.services.title} />} />
<Route path="/contact" render={() => <ContactPage title={this.state.contact.title} />} />
<Route path="/galleries" render={() => <GalleriesPage title={this.state.galleries.title} />} />
<Footer />
</div>