CODEWITHSUNDEEP
htmlcss
Julian Defiance
Julian Defiance

Reputation: 19

Navbar goes unwanted transparent after scrolling over Article

I narrowed tmy issue down to the CSS Line position:relative; and if I remove it, it works, but then the category cat-work (Blue label) is shown at the top left. Idk how to fix it to be honest. Here the Code on Codepen ;

http://codepen.io/Allkind/pen/YXEjXX 

    article{
    width:auto;
    min-height:10em;
    box-shadow: 0 0 4px rgba(0,0,0,.7);
    margin: 1em;
    font-family: 'Quicksand';
    float: left;
    position:relative;
    }

Note : Yes the Picture is too big but I tried it with others - same result. So someone might be able to have a better solution then remove the Label?^^

Upvotes: 0

Views: 34

Answers (1)

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13699

It's not transparent, your navbar is being overlapped by the article tag. To fix that set z-index in your navbar.

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
  border: 1px solid rgba(0,0,0,.1);
  z-index: 2; /* the z-index */
}

Working Code

Upvotes: 1

Related Questions