透明导航栏

Question

I have the following issue:

• I use a navbar with background-color
• I want to delete the background-color and make it transparent
• I deleted the background and applied position:absolute to it

Information: The image blow shows the design after position:absolute . The attached sample code is showing the original design before I applied changes to make it transparent.

Problem: After I applied position:absolute to navbar the items moved from right to left.

Goal: Just to make the goal clear: I want same navbar just with transparent background.

 * { box-sizing: border-box; margin: 0; padding: 0; } .row { clear: both; } .spalten-6 { width: 49.99992%; } .spalten-12 { width: 100%; } .spalten-6, .spalten-12 { float: left; } .img-box img { width: 100%; } .img-box { border-left: 2px solid white; border-top: 2px solid white; } #video-container { position: relative; height: 300px } #video-container { top: 0%; left: 0%; height: 100%; width: 100%; overflow: hidden; } video#bgVid { position: absolute; z-index: -1; background: url('http://ewallpaperhub.com/wp-content/uploads/2015/01/nature-wallpaper-3.jpg') no-repeat; background-size: cover; transition: 1s opacity; } video#bgVid.fillWidth { width: 100%; position: relative } nav { background-color: black; margin: 0; overflow: hidden; } nav ul { margin: 0; padding: 0; } nav ul li { list-style-type: none; } nav ul li a { color: white; background-color: black; display: block; line-height: 1em; padding: 1em 1.5em; text-decoration: none; letter-spacing: 0.15em; font-size: 13px; } nav ul li a.logo { background-color: black; } nav ul li a:hover { background-color: ; } li { float: right; } li:first-child { float: left; } nav ul li a img { width: 16px; height: 16px; float: right; margin-left: -20px; } .logo { font-size: 20px; letter-spacing: 0.1em; } .abstand-top { margin-top: 10px; } } nav ul li a img { width: 16px; height: 16px; float: right; margin-left: -20px; } .logo { font-size: 20px; letter-spacing: 0.1em; } .abstand-top { margin-top: 10px; } 

 <nav> <ul> <li><a href="http://google.com/" class="logo">BOOMYEAH</a></li> <li class="abstand-top"> <a href="#"><img src="Images/icon-facebook.svg" alt=""></a> </li> <li class="abstand-top"> <a href="#"><img src="Images/icon-instagram.svg" alt=""></a> </li> <li class="abstand-top"><a href="http://google.com/">WORK &nbsp; &nbsp; &nbsp; |</a></li> <li class="abstand-top"><a href="http://google.com/">ABOUT</a></li> <li class="abstand-top"><a href="http://google.com/">CREW</a></li> <li class="abstand-top"><a href="http://google.com/">CONTACT</a></li> </ul> </nav> <div id="video-container"> <video id="bgVid" loop class="fillWidth" autoplay> <source src=http://bigcom.com/assets/2014/08/iChooseB.mp4 type=video/mp4> </video> </div> 

Hope we will find a solution.

Answer 1

1. You didn't set the position of the nav to absolute
2. You set the background color to black, so it will not be transaper.
3. You need to set the z-index to make sure it has higher z-index so the user can click on the items in the menu.

 * { box-sizing: border-box; margin: 0; padding: 0; } .row { clear: both; } .spalten-6 { width: 49.99992%; } .spalten-12 { width: 100%; } .spalten-6, .spalten-12 { float:left;} .img-box img { width: 100%; } .img-box { border-left: 2px solid white; border-top: 2px solid white; } #video-container { position: relative; height:300px } #video-container { top:0%; left:0%; height:100%; width:100%; overflow: hidden; } video#bgVid { position:absolute; z-index:-1; background: url('http://ewallpaperhub.com/wp-content/uploads/2015/01/nature-wallpaper-3.jpg') no-repeat; background-size: cover; transition: 1s opacity; } video#bgVid.fillWidth { width: 100%; position:relative } nav { margin: 0; overflow: hidden; position: absolute; z-index: 10; } nav ul { margin: 0; padding: 0; } nav ul li { list-style-type: none; } nav ul li a { color: white; display: block; line-height: 1em; padding: 1em 1.5em; text-decoration: none; letter-spacing: 0.15em; font-size: 13px; } nav ul li a.logo { background-color: black; } nav ul li a:hover { background-color: ; } li { float: right; } li:first-child { float: left; } nav ul li a img { width: 16px; height: 16px; float: right; margin-left: -20px; } .logo { font-size: 20px; letter-spacing: 0.1em; } .abstand-top { margin-top: 10px; } } nav ul li a img { width: 16px; height: 16px; float: right; margin-left: -20px; } .logo { font-size: 20px; letter-spacing: 0.1em; } .abstand-top { margin-top: 10px; } 

 <nav> <ul> <li><a href="http://google.com/" class="logo">BOOMYEAH</a></li> <li class="abstand-top"><a href="#"><img src="Images/icon-facebook.svg" alt=""></a></li> <li class="abstand-top"><a href="#"><img src="Images/icon-instagram.svg" alt=""></a></li> <li class="abstand-top"><a href="http://google.com/">WORK &nbsp; &nbsp; &nbsp; |</a></li> <li class="abstand-top"><a href="http://google.com/">ABOUT</a></li> <li class="abstand-top"><a href="http://google.com/">CREW</a></li> <li class="abstand-top"><a href="http://google.com/">CONTACT</a></li> </ul> </nav> <div id="video-container"> <video id="bgVid" loop class="fillWidth" autoplay> <source src=http://bigcom.com/assets/2014/08/iChooseB.mp4 type=video/mp4> </video> </div> 

Answer 2

You need to use the background-color: rgba() property for the nav bar. rgba() is a function which takes 4 parameters, first three are the color values of RED, GREEN and BLUE, and the 4th parameter is transparency of the background, which can vary from 0 to 1. So, after adding it your code should look like:

 * { box-sizing: border-box; margin: 0; padding: 0; } .row { clear: both; } .spalten-6 { width: 49.99992%; } .spalten-12 { width: 100%; } .spalten-6, .spalten-12 { float:left;} .img-box img { width: 100%; } .img-box { border-left: 2px solid white; border-top: 2px solid white; } #video-container { position: relative; height:300px } #video-container { top:0%; left:0%; height:100%; width:100%; overflow: hidden; } video#bgVid { position:absolute; z-index:-1; background: url('http://ewallpaperhub.com/wp-content/uploads/2015/01/nature-wallpaper-3.jpg') no-repeat; background-size: cover; transition: 1s opacity; } video#bgVid.fillWidth { width: 100%; position:relative } nav { margin: 0; overflow: hidden; position: absolute; background-color: rgba(0,0,0,0.8); z-index: 10; } nav ul { margin: 0; padding: 0; } nav ul li { list-style-type: none; } nav ul li a { color: white; display: block; line-height: 1em; padding: 1em 1.5em; text-decoration: none; letter-spacing: 0.15em; font-size: 13px; } nav ul li a.logo { background-color: black; } nav ul li a:hover { background-color: ; } li { float: right; } li:first-child { float: left; } nav ul li a img { width: 16px; height: 16px; float: right; margin-left: -20px; } .logo { font-size: 20px; letter-spacing: 0.1em; } .abstand-top { margin-top: 10px; } } nav ul li a img { width: 16px; height: 16px; float: right; margin-left: -20px; } .logo { font-size: 20px; letter-spacing: 0.1em; } .abstand-top { margin-top: 10px; } 

 <nav> <ul> <li><a href="http://google.com/" class="logo">BOOMYEAH</a></li> <li class="abstand-top"><a href="#"><img src="Images/icon-facebook.svg" alt=""></a></li> <li class="abstand-top"><a href="#"><img src="Images/icon-instagram.svg" alt=""></a></li> <li class="abstand-top"><a href="http://google.com/">WORK &nbsp; &nbsp; &nbsp; |</a></li> <li class="abstand-top"><a href="http://google.com/">ABOUT</a></li> <li class="abstand-top"><a href="http://google.com/">CREW</a></li> <li class="abstand-top"><a href="http://google.com/">CONTACT</a></li> </ul> </nav> <div id="video-container"> <video id="bgVid" loop class="fillWidth" autoplay> <source src=http://bigcom.com/assets/2014/08/iChooseB.mp4 type=video/mp4> </video> </div> 

You can change the 4th value in the rgba() function as you want, i set it to 0.8.