I need to put an overlay effect on top of a Carousel of the bootstrap, but that takes all the height of it.
Clarifying better ... the first time I worked in this style - not in this section I sent - through some modifications I even managed to make the effect 100% on the Carousel and follow that perfectly on any device, only which in IE I had a problem, because my menu was totally thrown out of the slider (to the right side of the monitor where I had nothing else to view besides itself), whereas in other browsers it worked super well. So I decided to redo everything - in case it was this part I showed you - to which I adjusted the menu and left the part of the effect pending, but now I have this great doubt of how to solve: - (
.efeito-overlay {
z-index: 100;
}
nav {
z-index: 200;
}
.slide {
z-index: 40;
}
.efeito-overlay {
width: 100%;
height: 100% !important;
overflow: hidden;
position: absolute;
background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.15) 3px, rgba(0, 0, 0, 0.15) 4px), repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.15) 3px, rgba(0, 0, 0, 0.15) 4px), linear-gradient(to right bottom, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.15)), url();
background-position: bottom, left, top left, center;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: cover;
}
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
width: 100%;
margin: auto;
}
.slide {
display: block;
position: absolute;
min-width: 100%;
min-height: auto;
width: 100%;
height: auto;
background-color: #000;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.carousel-inner img {
width: 100%;
height: auto;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.floated {
float: left;
}
header {
position: relative;
display: flex;
justify-content: center;
align-content: center;
}
nav {
width: 100%;
height: 130px;
position: absolute;
top: 0;
padding: 10px 100px;
display: flex;
align-content: center;
display: inline-block;
}
nav #menu {
background-color: #CCC;
border-radius: 1px !important;
float: right;
}
nav .icon-bar {
background-color: #FFF;
}
nav a {
font-weight: 700;
text-transform: uppercase;
font-size: 0.875em;
letter-spacing: 1px;
color: #000;
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Menu</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="efeito-overlay"></div>
<div class="slide clearfix">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item slide1 active floated"><img src="imagens/1-slide.jpg" alt="">
<div class="carousel-caption"></div>
</div>
<div class="item floated"><img src="imagens/2-slide.jpg" alt="">
<div class="carousel-caption"></div>
</div>
<div class="item floated"><img src="imagens/3-slide.jpg" alt="">
<div class="carousel-caption"></div>
</div>
</div>
</div>
</div>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logo" href="index.html">Logo</a>
</div>
<div class="collapse" id="mymenu">
<ul class="nav navbar-nav" id="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>