I'm trying to make a resume/portofolio type of website. The only problem that I have is that my fixed navigation bar does not overlap some content of my website (an image and a some progress bars) when I scroll down.
Here's my CSS code:
body {
padding-top: 70px;
}
#nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
opacity:1;
}
#nav li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #007ed8;
}
#content{
margin-top:100px;
padding:20px;
}
img{
width:290px;
height:290px;
}
.margin{
margin-top:100px;
}
.margin_bar{
margin-top:6px;
}
a:hover{
text-decoration:none;
}
Here's a jsfiddle and thanks for your help! https://jsfiddle.net/6wzr6rtc/
Just add the z-index property with some high enough value to the #nav just to be sure that it always stays on top of everything else, e.g.:
#nav {
z-index: 999999;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments