I am currently working on a One Page HTML webpage that needs to be responsive, and the requirement is to use Bootstrap. I have gone through all the tags but can't seem to identify the issue.
One problem I encountered is that when I scroll down the page, the Carousel overlaps with the Menu.
Below is the CSS code:
.carousel {
height: 600px;
margin-bottom: 0px;
display: block;
position: relative;
}
/* Additional styling for caption */
.carousel-caption {
z-index: 10;
}
/* Specify heights due to image positioning */
.carousel .item {
height: 600px;
background-color: #777;
}
.carousel-inner > .item > img {
top: 0;
left: 0;
min-width: 100%;
height: 600px;
}
.carousel-caption {
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
position: absolute;
bottom: 0;
opacity: 1;
filter: none;
margin: 0 20% 0 0;
padding: 60px 0px;
background: none;
}
.carousel-caption h1 {
display: inline-block;
margin: 0 0 0px 0;
padding: 16px;
background: #000000;
background: rgba(0,0,0,0.6);
line-height: 1.1em;
color: #f3f3f3;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
font-size: 50px;
font-weight: 300;
border-bottom: solid 1px #0085c8;
}
.carousel-caption p {
background: #0085c8;
background-color: rgba(0,133,200,0.8);
}
Here is the HTML markup:
<div class="page-section.intro">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
</div>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</div>
</div><!-- /.carousel -->
I appreciate any help or suggestions. Thank you in advance.