CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
PeterPilz
PeterPilz

Reputation: 117

Transparent nav-bar

I have the following issue:

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.

Images shows the change after position:abosulte

* {
  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.

Upvotes: 0

Views: 397

Answers (2)

Contrevien
Contrevien

Reputation: 124

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.

Upvotes: 1

Dekel
Dekel

Reputation: 62556

  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>

Upvotes: 1

Related Questions