I'm encountering a rather simple issue that's giving me some trouble. I'm currently working on a website design using Bootstrap, and initially, there were no image sliders included by default.
After integrating an image slider, I noticed that my navigation bar consistently remains above it and never overlays the slider, which is not the desired effect. Here are examples:
This is how the page looks upon loading: https://i.sstatic.net/PW0ma.jpg
And this is how I want it to appear when the page loads (please note that it works fine if I scroll down a bit): https://i.sstatic.net/k660X.jpg
In essence, the navigation functions correctly; it just needs to sit atop the slider.
I'll provide the entire .css file containing all the code. I linked an image to the slider and created a navbar set to be translucent (opacity: 0.7).
All I need is for the navigation to start atop the slider and continue overlaying everything as I scroll (note: scrolling won't work in this snippet). It behaves well when scrolled; the only challenge lies in setting the initial position.
Additionally, don't worry about the blue overlay on the slider image; it's still a work in progress.
(CSS Styles)This is an H1 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit...