how does dropdown white background leave
I'm having trouble leaving the dropdown background white (I wanted to be able to 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> 2
2 answers
The problem is that the header tag is opacity set to "0.6". Since you are messing with the opacity of the "parent" element (header), the "opacity" property affects all elements that are inside the "header".
Instead of declaring opacity, you can declare a color for all links and then format only the menu items.
Add the following notation in the styles to see how it works:
.w3-opacity, .w3-hover-opacity:hover {
opacity: 1.0;
color: rgba(33,37,41,0.6);
}
.w3-button * {
color: rgba(33,37,41, 0.6) !important;
}
.w3-button *:hover {
color: rgba(33,37,41, 1) !important;
}
<!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;
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{
}
.w3-opacity, .w3-hover-opacity:hover {
opacity: 1.0;
color: rgba(33,37,41, 0.6);
}
.w3-button * {
color: rgba(33,37,41, 0.6) !important;
}
.w3-button *:hover {
color: rgba(33,37,41, 1) !important;
}
</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> 5
Author: Ricardo Pereira Dias, 2019-04-24 15:23:46
Well, it will only work if before you take the opacity from the <header> which is the main one, which controls it.
Setting the <header> to opacity:1; then you can control the menu making it more transparent or less.
Hence, the effect you want in header can control through colors, leaving the hue lighter.
-1
Author: Jorge Clésio, 2019-04-24 16:28:02