I am trying to make a mobile friendly site, which includes a menu that slides out from the side when a button is tapped. I am using Bootstrap for a slideshow, which includes h1 text on the images. Like in this picture (don't have enough reputation points to put one in directly, sorry) https://i.sstatic.net/YuaQ4.png. Please note that this was not taken on a mobile browser/device, but from Google Chrome.
The problem is that the text on the slideshows and the click dots overlap the menu, which I don't want to happen. I want the menu to be clear and clean, without that.
I tried to use z-index values to correct this, but it won't work no matter what I assign to each one. Any suggestions?
Good news! I found the problem. I was trying to apply the z-index only to the h1 elements, because that was what was overlapping the menu. I tried instead giving the entire Bootstrap Carousel a z-index of 1, by adding:
#myCarousel {
z-index: 1;
}
To my CSS page. And also assigning all the elements that make up the sliding menu a z-index value of 9.