navigation bar disappears if i add picture under

Question

I have a strange problem.

Everything on my page went well, I had my navigation bar ready (also for my mobile phone). Then I put a photo under the navigation bar and the bar was gone ..

I want the bar fixed so that it remains visible, but when I do it is gone.

The picture should remain relative otherwise this will not be correct anymore if you resize to mobile phone.

Someone a solution that keeps the bar back?

Image css

    .header{
      max-width: 100%;
      margin-left: 0;
      margin-top: 0;
      position: relative;
      letter-spacing: 4px;
      margin-top: 70px;
      box-sizing: inherit;
    }
    .header-image{
      max-width: 100%;
      height: auto;  
      border-style: none;
      background-size: cover;
      background-position: center center;
      display: block;
      position: relative;
      box-sizing: inherit;
    }
    .header-image-tekst{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      box-sizing: inherit;
      display: block;
      text-align: center!important;
      margin-top: 16px!important;
    }
    .header-image-tekst h1{
      color: white;
      font-size: 38px!important;
      margin: 10% 0;
    }
    .header-image-tekst h1 .border{
      padding: 8px 16px!important;
      background-color: black;
      opacity: 0.75;
    }

Navigation bar css

    .container{
        margin: 0 auto;
        width: 100%;
        position: fixed;
    }

    .nav{
      border-bottom: 1px solid #EAEAE8;
      text-align: right;
      height: 70px;
      line-height: 70px;
      position: fixed;
    }

    .menu{
      margin: 0 30px 0 0;
    }

    .menu a{
      clear: right;
      text-decoration: none;
      color: #000;
      margin: 0 10px;
      line-height: 70px;
      padding: 20px;
      border-radius: 40px;
    }

    .menu a:hover{
      background-color: #03999e3b;
    }
    label{
      margin: 0 40px 0 0;
      float: right;
      margin: 0 10px;
      line-height: 70px;
      font-size: 26px;
      display: none;
      width: 26px;
      float: right;
      
    }

    #toggle{
      display: none;
    }

    @media only screen and (max-width: 700px){
      label{
        display: block;
        cursor: pointer;
        position: fixed;
      }
      .menu{
        text-align: center;
        width: 100%;
        display: none;
      }
      .menu a{
        display: block;
        border-bottom: 1px solid #03989E;
        margin: 0;
      }
      #toggle:checked + .menu {
        display: block;
        position: fixed;
      }
    }

    .active{
      background-image: linear-gradient(315deg, #ffffff 0%, #03989E 74%);
      
    }

Answer 1

From what I can tell, the image is likely over-lapping the navbar. Use z-index on the navigation bar to make it appear on top of the image. If you don't want them overlapping then you'll have to adjust some of your layout CSS but that should work. I'll usually put my z-index for my navigation at 10, that way it'll always be in front of other elements where I have a z-index set.

Here's a reference article: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index