Why my navbar text that is set to white looks transparent? What happens is that it changes the color depending on the image on the background. What is causing this and how can I fix it? That is all that is the problem, below is the code.Because there is a saying "A piece of code is worth a thousand words" but stack overflow does not understand this, and for that reason I will write more words bellow so the site allows me to post this question.
/*DO NOT READ THIS Is a transparent background navbar above a slider with images and the text looks white but it takes the color of the image too like if it has some degree of transparency. I'm trying to create a website with a transparent navbar and a full height slider.The slider is build using swiper and I not using bootstrap.
Thanks for your help.*/
/* #region General */
/*Do not put height and width styles for the "html and body" elements
because it conflicts with boostrap. Rembember that bootstrap has
its own version of "Normalize.css"*/
*{
box-sizing: border-box;
}
html,body{
font-family:"Roboto", sans-serif;
color:#222222;
box-sizing: border-box;
margin:0;
padding:0;
}
html{
height:100vh;
/*Si pongo el estilo: "width:100vw;"
por algun motive crea una scroll bar*/
}
body{
height:100%;
}
.site-wrapper{
height: 100%;
padding: 0;
margin:0;
}
/* #endregion General */
/*#region Navbar*/
/* TODO: paste here navbar styles
from navbar.css */
#navbar{
background-color:transparent;
opacity:0.4;
border:none;
color:white;
position:fixed;
display:flex;
font-weight:500;
width:100%;
z-index:9;
}
#navbar header{
width:100%;
}
#navbar nav.visible{
display:flex;
width:100%;
}
#navbar nav>a{
text-decoration:none;
width:400px;
color:white;
}
#navbar nav.visible a .icon{
text-align:center;
display:flex;
justify-content:center;
font-weight:700;
}
#navbar ul{
display:flex;
justify-content:flex-end;
width:100%;
margin-right:6rem;
}
#navbar ul>li{
flex-basis:content;
flex-shrink:1;
list-style:none;
margin:0 2rem 0 2rem;
}
#navbar ul a{
text-decoration:none;
color:white;
}
/*Hidden navbar*/
#navbar nav.hidden{
display:none;
}
#navbar nav.show{
display:block;
}
#navbar nav.hidden ul{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
#navbar nav.hidden ul>li{
height:50px;
}
#menuButton{
display:none;
background:transparent;
border:none;
color:white;
fill:white;
height:100%;
width:30px;
margin:.5rem .5rem 0 auto;
padding:0;
}
/*Navbar background toggle*/
#navbar.bg{
background-color:yellow;
opacity:0.4;
}
/*#endregion Navbar*/
/*#region Slider*/
#slider .swiper-slide{
width:100%;
height:100vh;
background:url(https://www.fillmurray.com/460/300);
background-size:cover;
}
/*#endregion*/
/*#region Welcome*/
#welcome{
width:100%;
/*
background-color:rgba(0,0,0,0.2);
*/
margin:0;
padding:2rem;
text-align:center;
}
#welcome .welcome>*{
margin:0;
}
#welcome .welcome>h2{
padding:2rem;
}
#welcome .welcome>h5{
padding:2rem;
}
/*#endregion*/<!DOCTYPE html>
<html lang="en">
<!--#region Head-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Swiper -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<!--Css-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--End Css-->
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
</head>
<!--#endregion -->
<body>
<div class="site-wrapper" id="site-wrapper">
<!--#region Navbar -->
<section id="navbar">
<header>
<nav class="visible">
<a id="logo" class="logo" href="#">
<div class="icon">
<p>da Vinci Engineering</p>
</div>
</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button id="menuButton" class="menu">
<div class="icon">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
</svg>
</div>
</button>
</nav>
<nav id="navbarHidden" class="hidden">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
</ul>
</nav>
</header>
</section>
<!--#endregion -->
<!--#region Slider -->
<section id="slider">
<!-- Slider main container -->
<div class="swiper-container">
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
</div>
</section>
<!--#endregion -->
<!--#region Welcome -->
<section id="welcome" class="welcome">
<div class="welcome">
<h2>Welcome to da Vinci Engineering</h2>
<h5>We are a company compromised with desing.</h5>
<p>Ipsum at lorem esse delectus libero, sint. Pariatur cumque dolorum ab quia voluptates hic, magnam? Accusantium quia labore sunt at</p>
</div>
</section>
<!--#endregion Welcome -->
</div>
<!-- /#site-wrapper.site-wrapper -->
<!-- #region Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Swiper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<!-- Custom scripts -->
<!-- #region Swiper slider intialization -->
<script>
let swiper = new Swiper('.swiper-container',{
loop:true,
slidesPerView:1,
navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev',
},
pagination:{
el: '.swiper-pagination',
},
autoplay:{
delay:5000,
},
});
</script>
<!--
<script>
var mySwiper = new Swiper ('.swiper-container', {
loop:true,
slidesPerView:3,
spaceBetween:30,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay:{
delay:3000,
},
});
</script>
-->
<!--
<script>
var swiper = new Swiper({
el: '.swiper-container',
initialSlide: 2,
spaceBetween: 50,
slidesPerView: 2,
centeredSlides: true,
slideToClickedSlide: true,
grabCursor: true,
scrollbar: {
el: '.swiper-scrollbar',
},
mousewheel: {
enabled: true,
},
keyboard: {
enabled: true,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
-->
<!-- #endregion Swiper -->
<!-- #endregion -->
</body>
</html>
