CODEWITHSUNDEEP
htmlcssbootstrap-4
Daniel
Daniel

Reputation: 549

Fixed navigation bar not overlapping some parts of my website

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/

Upvotes: 0

Views: 48

Answers (3)

VXp
VXp

Reputation: 12058

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;
}

Upvotes: 2

Harden Rahul
Harden Rahul

Reputation: 938

You just need to simply add z-index to your code.

#nav{
  z-index:9999
}

Upvotes: 1

ankita patel
ankita patel

Reputation: 4251

Add this css to navbar for overlapping contents.

#nav {  
 z-index: 9; 
}

Upvotes: 1

Related Questions