2
I’m having difficulty leaving the background of the dropdown white (I wish I could remove this transparent from it)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Brown Odontologia</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--- zoom desativado para o usuario -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!----fonts google------->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/js" href="js/alerta.js">
<style>
.bs-example {
margin: 50px;
}
header {
z-index: 10;
}
@import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates');
h2{
font-family: 'Montserrat Alternates', sans-serif;
}
@import url('https://fonts.googleapis.com/css?family=Gentium+Book+Basic');
.numero{font-family: 'Gentium Book Basic', serif;
opacity: 0.6;
font-size:medium;
}
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 59.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
}
</style>
</head>
<body class="container">
<!--------------------------------------------------------- Menu ------------------------------------------------------------>
<div class="row justify-content-md-center">
<header class="w3-panel w3-center w3-opacity" style="padding:1px 5px">
<h1 class="w3-xlarge">BROWN ODONTOLOGIA</h1>
<hr style="line-height:2px; boder:none; color:aquamarine; background-color:black; margin-top:10px;" />
<h6>SEU SORRISO É NOSSA MISSÃO</h6>
<hr style="line-height:2px; boder:none; color:aquamarine; background-color:black; margin-top:10px;" />
<a href="#menu" class="w3-bar-item w3-button">Quem Somos ?</a>
<a href="#escolher" class="w3-bar-item w3-button">Por que nos escolher ?</a>
<a href="#especia" class="w3-bar-item w3-button">Especialidades</a>
<a href="#chegar" class="w3-bar-item w3-button">Como chegar ?</a>
<div class="w3-button">
<button type="button" class="btn btn-primary-center dropdown-toggle" data-toggle="dropdown">Contatos</button>
<div class="dropdown-menu" style="background-color: white"> <a href="#" class="dropdown-item">
<div class="col-lg-1 col-xs-2" style="text-align:right"> <i class="fa fa-whatsapp"
style="font-size:19px;color:#1BD741"></i> WhatsApp</div>
</a> <a href="#" class="dropdown-item" style="position:">
<div class="col-lg-1 col-xs-2" style="text-align:right"> <i class="fa fa-phone"
style="font-size:19px;color:black"></i> WhatsApp</div>
</a>
</div>
</div>
</header>
<!----------------------------------------------------------Tabela de contatos-------------------------------------------------->
<!---------------------------------------------------------------Slide--------------------------------------------------------->
<br />
<!-- Header -->
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.ibxk.com.br///2019/04/10/10104113623503-t1200x480.jpg" class="d-block w-100" alt="#">
<div class="carousel-caption d-none d-md-block">
<h5>Fácil Acesso</h5>
<p>Como chegar ? </p>
</div>
</div>
<div class="carousel-item">
<img src="https://img.ibxk.com.br///2019/04/10/10104113623503-t1200x480.jpg" class="d-block w-100" alt="#">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://img.ibxk.com.br///2019/04/10/10104113623503-t1200x480.jpg" class="d-block w-100" alt="#">
<div class="carousel-caption d-none d-md-block">
<h5>O que vale é a qualidade</h5>
<p>Venha Conhecer Nossos Planos</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Próximo </span>
</a>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".dropdown-toggle").dropdown();
});
</script>
</body>
</html>
I understood more ends up affecting the title , wanted to make a gambit to affect the options of contacts.....
– caiquesey
This is not possible, because you are touching the opacity of the "father" element. The "opacity" property affects all elements within the "header". You can instead of declaring opacity, try declaring a color for all links... is an option.
– Ricardo Pereira Dias
I rephrased the answer... I hope it helps you!
– Ricardo Pereira Dias
That’s right, @Ricardopareiradias, reworked the answer and was well explained about hierarchies.
– Jorge Clésio