So, I have a JS canvas that generates my BG and a Nav bar over, but the problem is that any box that I place appears over the background. I want the circles to be seen at all times, even under the Nav. In simple english - I want to make all box backgrounds transparent. I hope the problem is clear enough.
Code:
HTML:
<html>
<head>
<meta charset="utf-8">
<title>Sky</title>
<!-- Styles -->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/header.css" rel="stylesheet" type="text/css"/>
<link href="css/content.css" rel="stylesheet" type="text/css"/>
<link href="css/footer.css" rel="stylesheet" type="text/css"/>
<!-- P5 Libraries -->
<script language="javascript" type="text/javascript" src="libs/p5.js"></script>
<script language="javascript" src="libs/p5.dom.js"></script>
<!-- Sky BG -->
<script language="javascript" type="text/javascript" src="js/sketch.js"></script>
<script language="javascript" type="text/javascript" src="js/star.js"></script>
</head>
<body>
<div id="mainWrap">
<header>
<div id="logoDiv">
</div>
<nav id="mainNav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">HELP</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>
CSS:
html, body, #mainWrap {
height:100%;
width:100%;
margin:0px;
}
body{
color: rgba(255,255,255,0.9);
background-color: #222222;
}
a {
text-decoration: none;
color: rgba(255,255,255,0.3);
}
ul {
list-style-type:none;
}
CSS Header:
#mainNav ul, #mainNav ul li {
margin: 0px;
padding: 0px;
}
#mainNav{
text-align: center;
width: 100%;
height: 40px;
margin: 30px auto;
background-color: rgba(255, 0, 0, 0.0);
}
#mainNav ul li{
display: inline-block;
width: 20%;
height: 100%;
text-align: center;
}
#mainNav ul li a {
display: inline-block;
vertical-align: middle;
transition: 0.5s ease-in-out;
width: 100%;
height:40px;
padding: 20px 0;
}
#mainNav ul li a:hover {
color: rgba(255,255,255,0.9);
background-color: rgba(255,255,255,0.3);
}
#logoDiv {
width: 100%;
height: 100px;
opacity: 0;
}
The relevant js :
function setup() {
//full screen setup
canvas = createCanvas(window.innerWidth*1.4,window.innerHeight*1.4);
canStyle = canvas.style;
canvas.elt.style.position = "fixed";
mainWrap = document.getElementById('mainWrap');
canvas.parent(mainWrap);
Opacity:0; or/and filter: alpha(opacity = 0); results in this... the box elements are white not transparent.
Maybe try something along the lines of
filter: alpha(opacity = 0);in #mainNav and remove thebackground-color: rgba(255, 0, 0, 0.0);maybe? I'm not sure, don't have time to test it out but that's my guess.