Question

How to put a menu at the leftside of div with a video background.

By iweniviraldo ·
Hello I would like to have a nav menu in the left side of my <head> of 25% with and 100% height.

This my HTML:
<head>
<title>Controlmydestiny.com</title>
<div class="header">
<div class="category">
</div>

<nav class="navigation">
<a href="#" class="navbar-logo">Logo</a>
<div class="navbar-right">
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
</nav>

<div class="video-container">
<video autoplay loop muted id="video-bg">

<source src="http://bigcom.com/assets/2014/08/iChooseB.mp4" type="video/mp4">

</video>
</div>
</div>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

This is my CSS:

.navigation{
padding-top:30px;
padding-bottom:30px;
position:absolute;
top:0;
width:100%;
z-index:1;
}

.navbar-right{
float:right;
padding-right:10%;
}

.navbar-right a{
text-decoration:none;
padding:10px;
color: #fff;
font-family:Arial;
font-weight:900;
}

.navbar-right a:hover{
text-decoration:underline;
}
.navbar-logo{
padding-left:10%;
font-family:Arial;
font-size:30px;
font-weight:bold;
text-decoration:none;
color:#fff;
}

.video-container {
z-index: -100;
width:100%;
height:100%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}

#video-bg{
width:100%;

}
Thread display: Collapse - | Expand +

All Answers

Share your knowledge

Related Discussions

Related Forums