I've been searching for tutorials on parallax effects and I've managed to implement it successfully. However, when I tried adding a navigation bar to the parallax page, the results were not what I expected. Can someone assist me with this?
Below is the CSS code for the navigation bar:
body{
margin: 0;
}
.navigation{
width: 100%;
background: #313131;
height: 50px;
margin-top: 0px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
margin-top: 5px;
}
li {
float: left;
margin-top: 5px;
padding-left: 25px;
padding-right: 25px;
}
a{
width: 150px;
color: white;
display: block;
text-decoration: none;
font-size: 20px;
text-align: center;
padding: 2px;
border-radius: 4px;
font-family: Century Gothic;
font-weight: bold;
}
a:hover{
background: #669900;
transition: 0.6s;
}
CSS Code for Parallax Effect Page:
@import "bourbon";
//Edit these
$farColor: #ffe4c7;
$nearColor: darken(cyan,30%);
$layer: 7; //make sure it is +1 the ammount of layer divs in the html
$perspective: 1;
<!-- Add your Parallax CSS code here -->
HTML Code for Parallax Navigation Bar:
<!-- Add your HTML code for Parallax Navigation Bar here -->
I would like to have a floating navigation bar integrated into the parallax page layout.
To view the current implementation and where I need assistance, please visit: Parallax Page with Navigation Bar