I am in the process of creating a website that will serve as a showcase for my resume and portfolio. However, I am facing an issue with my fixed navigation bar not overlapping certain elements on the page, such as an image and progress bars, when I scroll down.
Below is a snippet of 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;
}
If you would like to take a closer look, here is the link to the jsfiddle: https://jsfiddle.net/6wzr6rtc/. Thank you for your assistance!